Vue3源码解析打造自己的Vue3框架

安卓开发求职招聘微信群 http://cgia.cn/news/chuangyi/1647591.html
Vue3带来了什么

1.性能的提升

Vue3与Vue2相比,在包大小(使用tree-shaking时减轻多达41%)、初始渲染(速度提高多达55%)、更新(多达%更快)和内存使用(最多减少54%)。

打包大小减少41%

初次渲染快55%,更新渲染快%

内存减少54%

必看!如何download课程

2.源码的升级

使用Proxy代替defineProperty实现响应式

重写虚拟DOM的实现和Tree-Shaking

......

3.拥抱TypeScript

Vue3可以更好的支持TypeScript

4.新的特性

CompositionAPI(组合API)

setup配置

ref与reactive

watch与watchEffect

provide与inject

......

新的内置组件

Fragment

Teleport

Suspense

其他改变

新的生命周期钩子

data选项应始终被声明为一个函数

移除keyCode支持作为v-on的修饰符

......

2、创建vue3工程2.1、使用vue-cli创建工程

从vue-cli的v4.5.0版本开始,vue-cli提供了内置选项,可在创建新项目时选择Vue3。所以通过vue-cli创建vue3项目需要保证vue-cli版本=v4.5.0。

##查看

vue/cli版本,确保

vue/cli版本在4.5.0以上vue--version##当版本过低时,安装或者升级你的

vue/clinpminstall-g

vue/cli

在更新vue-cli时,如果遇到以下错误:

则可能是node.js版本太低的原因,先更新node.js版本,比如升级至v12.11.0版本,然后卸载vue-cli,再重新安装即可。

创建vue3项目,命令如下,当遇到选择vue3还是vue2时,选择vue3即可。

##创建vuecreatevue3_test##启动项目cdvue3_testnpmrunserve

可以看到运行结果如下,跟vue2没有什么差别:

2.2、使用vite创建工程

什么是vite?——新一代前端构建工具。

优势如下:

开发环境中,无需打包操作,可快速的冷启动。

轻量快速的热重载(HMR)。

真正的按需编译,不再等待整个应用编译完成。

传统构建与vite构建对比图




转载请注明:http://www.aierlanlan.com/grrz/5950.html