vue3的diff优化了哪些

vue3的diff对比vue2其实变化非常大,不再是像vue2一样简单的区分文本节点,注释节点以及数组节点,而是对各种类型的VNode增加了type类型做了区分。

vue3的diff,首先增加了shapeFlag和patchFlag。用于快速区分节点以及快速区分是否动态节点,对不同类型的节点做不同的处理,静态节点不做处理

增加了静态节点标记,而不是像vue2一样只标记静态根节点

在完整diff的过程中,采用的是 头头对比,尾尾对比,处理新增的和删除,然后处理未知子序,通过构建一个索引图来优化进一步寻找需要移除或者添加的节点,以及更新 sameVnode,通过获得未知子序的最长递增子序列,以这个最长递增子序列不动为前提,倒序遍历剩余节点,对节点进行最少的移动,完成对两个同级数组的更新,如果有儿子,继续递归(patch),最终完成对整个subTree的更新

最后,还增加了静态事件,因此在diff的过程中,如果是静态事件,事件的变化将不会引起组件的update。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Neo 丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值