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-gvue/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构建对比图