vue3测试于2020年九月,直至2021年底成为vue的核心库,在此之前市场上大部分所使用vue搭建的项目为vue2,但vue3取代于vue2已经成为必然的趋势,在学习vue3之前建议提前学习vue2,待到vue3占据市场大部分时就可以对vue2仅做了解的学习
vue3相较于vue2有更多的优势,具体表现于性能方面:
-
项目打包体积更小
-
初次渲染更快,更新渲染更快
-
需要的运行内存更小
-
使用了Proxy(代理)替代了Object.defineProtype,实现了数据的响应
-
虚拟DOM更新了算法 和 Tree-Shaking
-
更好的支持了TypeScript(微软,js超集)
vue3的项目搭建
基础配置:
webpack,node.js
下载指令:
npm i webpack -g npm i @vue/cli -g
创建项目方式
vue create 项目名称
vue3具有很多与vue2不同的特性:
1、Fragment模板碎片
描述:在vue2中,组件的引入必须要在最外层进行整体包装,即需要有一个根标签,而在vue3中解决了这个问题,在vue3中可以有多个根标签
2、setup属性
描述: 当使用 <script>标签时
的时候,只要加上了setup属性,任何在顶层进行声明引入 (包括变量,函数声明,以及 import 引入的内容) 都能在模板中直接使用(无需注册),其中的引入绑定会直接暴露给模板;
但是setup属性不能和export default同时出现,所以加上这个属性的script标签只建议用于作为引入中转站使用,因此不建议在其中进行代码操作;
注意点
值得注意的是,作为vue2中进行编辑器报错的插件vetur无法在vue3中使用,可以使用 Vue Language Features (Volar)插件进行替代