Vue框架虚拟DOM与diff算法

你必须记住，diff算法只是一种比较手段，本质落脚点是新元素。说白了就是根据新元素的子节点，按照一定的规则去旧元素的子节点中查找有没有相同的，有没有重用的5.diff算法流程下面用这个例子来演示diff算法流程旧元素，最外层div，子节点p，span，h3，a新建元素，最外层也是div，子节点p,a,div,h3,h5为了比较方便，在old元素的子节点上加上前缀old，并在新元素的子节点上加上前缀New，即Old:Old_p,Old_span,Old_h3,Old_aNew:New_p,New_a,New_div,New_h3,New_h5开始比较，记住，每一轮都是两两比较old和new，落脚点是新元素的第一轮比较：NewheadVSoldhead：New_p和Old_p，结果都是p，所以新元素的第一个子节点p不需要重新创建，旧元素的p节点可以重用。NewheadVSoldtail：new_p和old_a不同，但是已经在旧元素中找到了相同的，即结论已经被复用：新元素的第一个节点，如果在第一个中找到相同的节点andlastnodesoftheoldelement,itcanreuse,nonewcreation,andnoparticipatingthesecondroundcomparisonwiththenewtailVSoldhead:New_h5和Old_p不同，新元素尾节点h5不能复用NewtailVSoldtail：New_h5和old_a不同，新元素tail节点h5不能复用结论：新元素tail节点，在旧元素的首尾节点中找不到相同的节点，所以不能复用.等待第二轮比对。old_h3,Old_anew:New_a,New_div,New_h3,New_h5newfirstVSoldfirst:New_aandOld_spannewfirstVSoldtail:New_aandOld_a结论：在old的第一个和最后一个节点中找到新元素的第一个节点元素。可以复用，不新建，不参与第三轮比对NewtailVSoldhead:New_h5andOld_spanNewtailVSoldtail:New_h5、old_a结论：新元素的尾节点在旧元素的首末节点中找不到，不能重用。等待第三轮比较。第三轮比较：此时的新旧元素及其子节点（New_p、New_a已经被复用，不参与比较）Old：Old_span、Old_h3New：New_div、New_h3、New_h5New_div、New_h3、New_h5NewfirstVSoldfirst：new_divandOld_spanNewfirstVSoldtail:New_divandOld_h3结论：新元素的第一个节点，在旧元素的第一个和最后一个节点中找不到相同的节点，不能重复使用。等待第四轮比较。找不到相同的，不能重用，等待第四轮比对注意，因为本轮没有匹配到可重用节点，准备等待第四轮比对，但是只有两个child为旧元素留下的节点，下一轮仍然是Nomatch，所以本轮结束后，直接创建首节点New_div和尾节点New_h5。第四轮比较：此时的新旧元素和子节点（New_p、New_a已经被重用，New_div、New_h5已经创建，全部不参与比较）Old：Old_span、Old_h3New：New_h3新元素只有New_h3，直接比较New_h3和Old_spanNew_h3和Old_h3结论：在旧元素的第一个和最后一个节点中找到相同的节点，可以重复使用，而不是在new创建时，新元素子节点都OK，而旧的元素子节点留有old_span，直接删除就可以了。至此，本例的diff算法就完成了。其实还有一种情况需要说明一下。如果某轮第4次比较都失败了，你应该在旧元素的子节点上寻找相同的key，这就是Vue要求添加key的原因。第六，diff算法的最终过程其实比本例更复杂，需要考虑的情况也更多。本文只是个人学习总结，如果对你有帮助，那很好。