Vue3.0系列——《vue3.0性能如何变快？》

前言，先学习vue2.x，很多2.x的内容还保留着；先学TypeScript，vue3.0是用TS改写的，想知道为什么，一定要学TS。为什么要学习vue3.0？性能比vue2.x快1.2-2倍按需编译，比vue2.x更小CombinedAPI（类似ReactHook）更好的TS支持暴露自定义渲染API更高级的组件vue3.0是如何变得更快的？vue2.x中优化虚拟dom的diff方法就是进行全量比较。而vue3.0增加了静态标签。在与上一个虚拟节点进行比较时，只比较有patchflag的节点，通过flag的信息可以知道当前要比较的节点的具体内容。举个例子，下面是一段代码。

vue2.x的diff算法是对虚拟dom树的全量比较。vue3.0的diff算法在创建虚拟dom时，会根据dom中的内容是否发生变化，添加静态标签。仅将节点与补丁标志进行比较。Vue3.0diff算法优化上图大家可能看不懂，我们换个角度来看。可以看到下图中数据绑定的元素中有一个静态标签1，测试URL：https://vue-next-template-explorer.netlify.app/。静态标记hoistStatic(staticpromotion)在vue2.x中，无论元素是否参与更新，每次都会重新创建，然后渲染。在vue3.0中，不参与更新的元素会进行静态改进，只会创建一次，渲染时可以直接复用。我们再去测试网站，在静态标签选项前打勾。这时候，我们就会发现不同之处。右边固定数据的标签，也就是这里的

标签

，是放在render函数外面的。所以这只会在全局创建一次，因此性能会得到显着提升。静态改进cacheHandlers（事件监听缓存）默认情况下，一个onClick事件会被当做一个动态绑定，所以每次都会跟踪它的变化，但是因为是同一个函数，所以不需要跟踪变化，而且它会直接缓存，重复使用即可。好的，让我们比较启用事件侦听器缓存前后。如果没有开启事件监听缓存，我们会看到有一个静态标记，所以每次都会跟踪。未启用Enableeventlistenercache在eventlistenercache前打勾以启用它。我们看到，如果没有静态标记，就没有比较跟踪，并且性能会提高。打开