参考文章:
https://blog.csdn.net/qq_36337754/article/details/104933542
https://www.cnblogs.com/wind-lanyan/p/9061684.html
https://www.jianshu.com/p/cfbde0326dde
diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁。
patchVnode过程:
其中updateChildren的过程:
该过程为不断更新子节点的过程,从两头向中间走
其中判断sameVnode的条件为:
从sameVnode中可以看出:如果在节点中未定义key的话,那么如果key之后的几个条件满足的话,新旧节点在比较中永远返回true,即updateChildren的分支永远走到该处:
else if (sameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode, newStartVnode,
insertedVnodeQueue, newCh, newStartIdx);
oldStartVnode = oldCh[++oldStartIdx];
newStartVnode = newCh[++newStartIdx];
如此,在不断循环的过程当中,updateChildren和patchVnode会不断反复调用,引起不必要的计算浪费