1、diff比较算法
图示:
diff比较只会在同层级进行, 不会跨层级比较。
代码示例
<!-- 之前 -->
<div> <!-- 层级1 -->
<p> <!-- 层级2 -->
<b> aoy </b> <!-- 层级3 -->
<span>diff</Span>
</P>
</div>
<!-- 之后 -->
<div> <!-- 层级1 -->
<p> <!-- 层级2 -->
<b> aoy </b> <!-- 层级3 -->
</p>
<span>diff</Span>
</div>
我们可能期望将<span>
直接移动到<p>
的后边,这是最优的操作。
但是实际的diff操作是:
(1)<p>
移除里的<span>
(2)创建一个新的<span>
插到<p>
的后边。
因为新加的<span>
在层级2,旧的在层级3,属于不同层级的比较。
vue源码中会有一个sameVnode方法:
function sameVnode (a, b) {
return (
a.key === b.key && (
(
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b)
) || (
isTrue(a.isAsyncPlaceholder) &&
a.asyncFactory === b.asyncFactory &&
isUndef(b.asyncFactory.error)
)
)
)
}
表示2个Vnode是否是同一个节点:
(1)当是一样的节点,直接复用(若设置key的话)。
(2)当不是一样的节点的话,新节点直接替换老节点。
2、比较原则
图示:
图师说明:
粉红色的部分为oldNode,黄色的表示newNode。
s和e指针指向它们的头child和尾child Node的指针。
现在分别对oldS、oldE、S、E两两做sameVnode比较,有四种比较方式。
即:
oldS == S?
oldS == E?
oldE == S?
oldE == E?
diff算法:
如果是oldS和E匹配上了,那么真实dom中的第一个节点会移到最后
如果是oldE和S匹配上了,那么真实dom中的最后一个节点会移到最前,匹配上的两个指针向中间移动
如果四种匹配没有一对是成功的,那么遍历oldChild,S挨个和他们匹配,匹配成功就在真实dom中将成功的节点移到最前面,如果依旧没有成功的,那么将S对应的节点插入到dom中对应的oldS位置,oldS和S指针向中间移动。
3、key
不设key,newCh和oldCh只会进行头尾两端的相互比较。
设key后,除了头尾两端的比较外,还会从用key生成的对象oldKeyToIdx中查找匹配的节点,所以为节点设置key可以更高效的利用dom。
(1)下图是没有设置key的diff算法
(2)下图是有设置key的diff算法
参考文章:
https://www.cnblogs.com/wind-lanyan/p/9061684.html
https://segmentfault.com/a/1190000008782928?utm_source=tag-newest