Vue3的学习（一）

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)插件进行替代