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.乱序,尽可能找相同节点放到另一个数组,再考虑新增和删除的