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

概要
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中，每个元素都会变成虚拟节点，一大堆的虚拟节点