vue3的diff优化了哪些

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

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

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

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

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

你可能感兴趣的:(vue.js)