Vue的diff算法

63 阅读1分钟

作用:提升性能!

1.无key

当没key值时

新旧节点一一进行对比,当有节点出现不同时,使用patch进行覆盖(替换)。

缺点:相同的节点,没有进行复用,浪费性能

2.有key

当有key值为唯一值时,执行具体分为以下五步!

1.使用前序对比算法,直到遇到不同节点的跳出循环,保留之前的。

2.使用尾序对比算法,遇到不同的节点,也跳出循环,保留

3.如果有新节点,通过patch(第一个参数为null)挂载

4.如果旧节点,多出来就卸载。

5.特殊情况,乱序

尽可能复用保留旧节点和新节点相同的节点,再去新增和移除

图解:

image.png