vue3 在哪些方便做了性能提升？

Posted 2023-03-27

参考技术A

概要
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。vue2版本阶段已经证明了它的易用性和流行性，说明它已经足够优秀在构建前端应用领域，而vue3的推出更是将性能提升做了最大的优化，更加易用、灵活、高效，未来是属于vue3的时代，因此深入了解vue3相对vue2在哪些方面做了性能提升，怎么提升性能的是非常有必要的。

编译阶优化段
在Vue2中，每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知watcher，从而使关联的组件重新渲染

假如一个vue组件有如下模板结构：

可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多 diff 和遍历其实都是不需要的，会造成性能浪费。因此，Vue3在编译阶段，做了进一步优化。主要有如下：

diff算法优化

vue3在diff算法中相比vue2增加了静态标记关于这个静态标记，其作用是为了会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较，如下图

静态类型如下所示

静态提升

Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用

没有做静态提升之前

做了静态提升之后

静态内容_hoisted_1被放置在render 函数外，每次渲染的时候只要取 _hoisted_1 即可同时 _hoisted_1 被打上了 PatchFlag ，静态标记值为 -1 ，特殊标志是负整数表示永远不会用于 Diff

预字符串化

在平时vue开发过程中，组件当中没有特别多的动态元素，大多都是静态元素。比如：

在这个组件中，除了span元素是动态元素之外，其余都是静态节点，一般可以说是动静比，动态内容 / 静态内容，比例越小，静态内容越多，比例越大，动态内容越多，vue3的编译器它会非常智能地发现这一点，当编译器遇到大量连续的静态内容，会直接将它编译为一个普通字符串节点，因为它知道这些内容永远不会变化，都是静态节点。

然而在vue2中，每个元素都会变成虚拟节点，一大堆的虚拟节点😱，这些全都是静态节点，在vue3中它会智能地发现这一点。如下图所示，我们可以很明显的感受到vue3的巨大性能提升

缓存事件处理函数

比如存在如下事件处理函数
<button @click="count++">plus</button>

对比vue2和vue3的处理方式

在vue2中创建一个虚拟节点button，属性里面多了一个事件onclick，内容就是count++。在vue3中会认为这里的事件处理是不会变化的，不是说这次渲染是事件函数，下次就变成别的，于是vue3会智能地发现这一点，会做缓存处理，它首先会看一看缓存里面有没有这个事件函数，有的话直接返回，没有的话就直接赋值为一个count++函数，保证事件处理函数只生成一次。

SSR优化

当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerhtml，就不需要创建对象，然后根据对象渲染。

编译前

编译后

源码体积有优化

与Vue2相比较，Vue3整体体积变小了，移除了一些比较冷门的feature：如 keyCode 支持作为 v-on 的修饰符、on、off 和 $once 实例方法、filter过滤、内联模板等。tree-shaking 依赖 ES2015 模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记。任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小。

响应式实现优化

改用proxy api做数据劫持

响应式是惰性的

http://vue-next-template-explorer.netlify.app/