Vue3.0为啥这么快？

我也是看过别人的文章来写的，
有别人写的好的，我为啥自己还在写一遍，自己写过一遍才记的更清楚

diff算法的改变

在这先解释一下什么是Diff算法；		
	diff算法是通过循环递归对节点进行比较，比较出节点状态和需要的操作，最后使用vnode进行DOM渲染，
	在次过程中会有俩个DOM树，一个第一次渲染的，一个更新后的渲染的。

1.vue2.0中的使用diff算法的时候，会变全部的节点都进行渲染。不管是写死的div还是需要改变的，都会进行重新渲染
2.vue3.0的时候，在渲染Dom的时候会根据有没有需要该更的地方加上添加静态标记，标记取值的内容不同，更新的内容就有所不同，在数据更新后的时候渲染DOm只会把标记的地方进行更新

画的比较丑，勉强看吧

hoistStatic 静态提升

1. vue2.0 中在更新Dom的时候会全量更新，重新创建。会消耗性能
2. vue3.0中对于不更新的元素只会创建一次，在后面每次的渲染中都会复用，就比如上图写死的div

cacheHandlers 事件侦听器缓存

1.在之前的Onclick是会被视为动态绑定的，每次都会追踪动态绑定的变化，但是又是同一个函数，直接复用就好

ssr 渲染

1. 当再有大量的静态内容的时候，会已字符串的形式纯在buffer里，就算有动态改变的内容，也可以用模板插值的方法，这样比虚拟DOM来的快一点
2. 当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染，也就是说不需要经过虚拟dom的过程。

参考地址https://blog.csdn.net/shadowfall/article/details/112385269

标签：这么,渲染,静态,为啥,DOM,更新,算法,Vue3.0,diff
来源： https://blog.csdn.net/weixin_44655037/article/details/120331119