Vue3_diff算法_绑定key操作的区别_浅分析

diff 算法浅分析

源码位置
packages/runtime-core/src/renderer.ts

---

当需要对NodeList进行操作时，分两种情况，即是否绑定了key

1.无key

packages/runtime-core/src/renderer.ts/baseCreateRenderer/patchUnkeyedChildren

1.获取oldLength和newLength，并取最小值commonLength
2.调用patch函数进行遍历commonLength
2.1.一样就return跳过
2.2.不一样就深层次对比
3.不一样时，会覆盖旧的Vnode
4.如果oldLength > newLength，则代表新的删除了，调用unmountChildren操作；否则新增，调用mountChildren操作
没有key，无法复用，浪费性能

2.有key

packages/runtime-core/src/renderer.ts/baseCreateRenderer/patchkeyedChildren

1.前序对比，isSameVNodeType对比type和key
1.1.不一样时，break
2.后序对比，isSameVNodeType对比type和key
2.1.不一样时，break
3.1.新节点如果多出来，就挂载通过patch函数第一个参数为null
3.2.旧节点如果多出来就是卸载
3.3.乱序，尽可能找相同节点放到另一个数组，再考虑新增和删除的