本系列文章目录
vue3.0六大亮点
- Performance:通过
Proxy
实现双向响应式绑定,相比defineProperty
的遍历属性的方式效率更高,性能更好,另外Virtual DOM
更新只diff动态部分、事件缓存等,也带来了性能上的提升 - Tree-Shaking Support:相比2.x导入整个Vue对象,3.x支持按需导入,只打包需要的代码
- Composition API:组合式API,面向函数编程
- Fragment、Teleport、Suspense:“碎片”,
Teleport
即Protal传送门,“悬念”,参考了React的设计 - Better Typescript support:2.x设计之初没有考虑到类型推导,导致适配ts比较困难,3.x移除了this对象,利用了天然对类型友好的普通变量与函数,对TypeScript支持更好
- Custom Render API:提供了自定义渲染API
目前vue3.0已经进入最终测试版Release Candidate阶段,相信正式版很快就可以和大家见面。
RC阶段意味着API已经成熟稳定,这个阶段只是改改bug,没有大问题的话不会有功能变动。
vue3.0为了兼顾2.x的升级,将支持2.x的大部分语法,包括现在的data
、methods
、computed
、watch
、hooks
等,但并不是全部兼容,另外还包含一些其他修改,需要手动修改支持,所以3.0并不是无缝对接2.x,只是兼容了大部分,减少升级成本。
以下是本文使用的版本
"@vue/cli": "^4.4.6"
"vue": "^3.0.0-rc.9"
"vue-router": "^4.0.0-beta.7"
"vuex": "^4.0.0-beta.4"
一、快速搭建vue3.0项目
经掘金用户 @Web默默 提醒,vue-cli@4.5.4已经支持直接创建vue3.x项目了,更新一下文档。
特意去vue-cli的github(github.com/vuejs/vue-c…)看了下发布记录,发现4.5.0已经开始支持创建vue3.x项目了,并且已经支持TypeScript了,但是为了避免问题,还是直接升级到最新版,截至2020-09-05最新版本是4.5.4。
1、安装vue cli
npm install -g @vue/cli
之前已经安装过vue-cli的话,可以升级到最新版
npm update -g @vue/cli // 升级vue-cli到最新版
vue -V // 查看vue-cli版本
2、创建vue3.0项目
vue create vue3-test
选择预设配置,这里我们选择人工选择(Manually select features)
选择功能配置,根据自己需要选择,不熟悉TypeScript的同学可以不选TypeScript,Unit Testing也可根据需求选择
下一步,选择 3.x (Preview)
下面这些自己根据需求选择即可,这里不再介绍
只需2步,就把vue3.x项目搭建起来了,下面开始看看vue3.x怎么使用,2.x怎么升级。