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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值