Vue视图更新（Diff算法）

一、当数据发生变化时，vue是怎么更新节点的？

        要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实DOM上会引起整个DOM树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个DOM呢？diff算法能够帮助我们。

我们先根据真实DOM生成一颗virtual DOM（虚拟DOM），当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

二、virtual DOM和真实DOM的区别？

//真实DOM

    
123



//虚拟DOM(virtual DOM)

var Vnode = {
    tag: 'div',
    children: [
        { tag: 'p', text: '123' }
    ]
};
/**注：VNode和oldVNode都是对象，一定要记住

三、diff的比较方式？

在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。

 patch过程会判断新旧两个节点是否值得比较；

        如果新旧两个节点一致：比对他们的子节点；如果新旧两个节点不一致：使用新节点替换旧节点。直接替换，不再向下比对。

  补充：如果根节点不同，但是子节点完全相同，但是也会被重新渲染，无法重复利用。【diff算法的一个劣势】

四、同级节点比较

 同级子节点相当于两个数组比较，取新旧两个数组的头尾作为指针：oldS、oldE、S、E,两两比对会出现以下四种情况：

1.  oldS = S, oldE = E :这里指的是两个指针向中间移动；
2. oldS = E时，将真实DOM第一个节点移动到最后；
3. oldE = S时，将真实DOM最后一个节点移动到最前main；
4. 如果以上都没有匹配到时，使用S在oldChildren中遍历，如果遍历到，则将真实DOM中对应S的节点移动到第一个，如果没有匹配到，在oldChildren中第一个插入S节点；

两个指针指向中间遍历：如果oldChildrenz先遍历完，将vnode中剩余节点插入到oldChildren中，反之在oldChildren中删除多余的节点。

**注：子节点比较时，如果设置key,使用key进行比较。key是用来辅助判断新旧两个节点在逻辑上是否相同，增加了对于节点的唯一标识。