Vue3.0是如何变快的?

Vue3中的diff算法

• 什么是diff算法:传统的Diff算法通过循环递归对节点进行比较，然后判断每个节点的状态以及要做的操作,最后根据vnode进行DOM的渲染。会有两颗DOM树,一个是上次渲染生成的DOM树，一个数数据更新后生成的DOM树，Vue2中会循环遍历全量比较，无论是写死的div还是可变的每一次都会进行比较，所以就会有较大的性能消耗。

• 在Vue3中，在每次创建虚拟DOM的时候，会根据DOM中的内容会不会发生变化，添加静态标记，标记取值内容的不同代表了需要变化的内容也不同，在数据更新后生成的新的虚拟DOM，并且进行比较的时候只会比较拥有静态标记的内容。

hoistStatic 静态提升

• Vue2中无论元素是否参与更新，每次都会重新创建。
• Vue3中对不参与更新的元素，只会被创建一次，之后会在每次渲染的时候不停的进行复用。比如写死的p标签

cacheHandlers 事件侦听器缓存

• 在默认情况下onClick会被视为动态绑定，所以每次都会去追踪动态绑定的变化。但是因为是同一个函数，所以不会追踪变化，直接缓存起来复用即可

ssr 渲染

• 当有大量的静态内容的时候，这些内容会以字符串的形式存储到buffer里面。即使存在动态的绑定，也会通过模板插值嵌入进去，这样会比虚拟dom来渲染快的多
• 当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染，也就是说不需要经过虚拟dom的过程。

参考文献

bilibili 李南江老师