Vue的diff算法

是什么

diff 算法是一种通过同层的树节点进行比较的高效算法

其中会有两个特点：

• 比较只会在同层级进行比较，不会跨层级比较
• 在比较过程中，循环从两边向中间比较

diff算法在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实的dom的新旧VNode节点进行比较

比较方式

diff整体策略为：深度优先，同层比较

1. 比较只会在同层级进行，不会跨层级比较
2. 比较过程中，循环从两边向中间收拢

一层一层比较，检测到R下没有A，则会把A删掉，然后在D下创建B、C

• 找到对应的真实dom，称为el

• 判断Vnode和oldVnode是否指向同一个对象，如果是，那么直接return

• 如果他们都有文本节点并且不相等，那么将el的文本节点设置为Vnode的文本节点。

• 如果oldVnode有子节点而Vnode没有，则删除el的子节点

• 如果oldVnode没有子节点而Vnode有，则将Vnode的子节点真实化之后添加到el

• 如果两者都有子节点，则执行updateChildren函数比较子节点