其他分享
首页 > 其他分享> > Vue3.0为啥这么快?

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