前言：
Vue3 发布已经有一段时间了，相信不少人也开始用起来了，但是我为什么一定要学 Vue3 呢？
- 性能比
vue2.x快1.2～2倍 - 按需编译，体积比
vue2.x更小 - 组合API（类似
React Hook） - 更好的TS支持
- 暴露了自定义渲染API
- 支持
Tree-shaking
Vue3 性能是如何提升的？
响应式系统提升
-
Vue2.0中响应式系统的核心defineProperty 在初始化时会遍历data中的所有成员，通过defineProperty将对象的属性转换为getter和setter，如果对象中的成员又是对象的话需要递归处理里面的每一个属性，因为是在初始化时进行的defineProperty，所以没有使用的属性也进行了响应化处理
-
Vue3.0中使用Proxy对象重写响应式系统 使用的Es6后新增的Proxy对象，本身性能就比defineProperty要好。另外代理对象可以拦截属性的访问、赋值、删除等操作，不需要初始化时遍历所有的属性。另外多层嵌套属性只有在访问时才会递归处理下一层属性
-
- 可以监听动态新增的属性，vue2.0中需要调用vue.set()进行处理
- 可以监听删除的属性，vue2.0监听不到属性的删除
- 可以监听数组的索引和length属性，vue2.0监听不到这两个属性的操作
使用Proxy提升了响应式的性能和功能
编译时对虚拟Dom的性能优化
vue2.x中的虚拟dom是进行全量的对比。而vue3.0新增了静态标记。在与上次虚拟节点进行对比的时候，只对比带有patch flag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容。
下面我们来举个例子，以下是代码片段。
<div>
<p>标签</p>
<p>{{msg}}</p>
</div>
复制代码
vue2.x的diff算法是对虚拟dom树全量的对比。 vue3.0的diff算法在创建虚拟dom的时候，会根据dom中的内容是否发生变化，添加静态标记。只对比带有patch flag的节点。
hoistStatic 静态节点提升
vue2.x中无论元素是否参与更新，每次都会重新创建，然后再渲染。vue3.0中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可。
当使用hoistStatic时，所有 静态的节点都被提升到render方法之外。这意味着，他们只会在应用启动的时候被创建一次，而后随着每次的渲染被不停的复用。
在大型应用中对于内存有很大的优化。
Tree-shaking
说到 Tree-shaking 这个属于，官方的解释用大白话说就是，没有被应用到的代码，编译后自动将其剔除。
实际原理 因为ES6模块是静态引用的，所以我们可以在编译时正确的判断到底加载了哪些代码。对代码全局做一个分析，找到那些没用被用到的模块、函数、变量，并把这些去掉。
当使用一个 bundle （webpack etc.）的时候，默认会加上 TreeShaking。Vue 3.0 中没有被用到的模块可以不被打包到编译后的文件中，被 TreeShake 掉。当只有一个HelloWorld的时候 Vue3打包后 13.5kb。所有的组件全部加载进来时是 22.5kb
作者：chenuvi
参考内容：
vue3 官网教程
本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情
