vue diff算法详解

前言

因为重新渲染数据会引起dom的重绘和回流（重排），这对性能消耗消耗是非常大的，我们在开发的时候尽量避免重绘和回流。因此vue就引入了虚拟dom，也就是virtual dom，这样可以避免直接频繁操作真实的dom,以此来减少性能消耗。

virtual dom通过diff算法（patch）来比较与真实dom的差异，从而更新dom,大大减少了对dom的操作，下面介绍具体方式

一、准备工作

1. 比较vdom （新节点）和odom（旧节点）都是对应一层层的比较的，不会垮层级比较，而且它们都是对象。
2. 在数据更新时，set会通知Dep的notify，来更新所有的watcher(订阅者) 去打补丁(patch)

核心代码

1. 首先进行判断新老节点是否是同一节点，如果是就进行patchVnode(sameVnode比较新老节点的key, tag,data,注释节点以及input的时候type是否相同)
2. 否则就添加新元素到本来节点上，移除掉以前节点

function patch (oldVnode, vnode) {
    // some code
    if (sameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode)
    } else {
        const oEl = oldVnode.el // 当前oldVnode对应的真实元素节点
        let parentEle = api.parentNode(oEl)  // 父元素
        createEle(vnode)  // 根据Vnode生成新元素
        if (parentEle !== null) {
            api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 将新元素添加进父元素
            api.removeChild(parentEle, oldVnode.el)  // 移除以前的旧元素节点
            oldVnode = null
        }
    }
    // some code 
    return vnode
}

patchVnode

这主要是判断5个情况

1. 看是否是指同一个对象，如果是，直接return
2. 看文本节点是否相等，如果不相等，新的替换旧的
3. 比较子节点， 如果新节点有，旧的没有，直接新增
4. 比较子节点，如果新的没有，旧的有，直接删除
5. 如果都有，就执行更新子节点函数

执行更新子节点函数

1. 首先提出新旧节点的子节点 vch和oldch

2. 定义vch和oldch两个头尾变量startIdx和endIdx,它们两个变量互相比较，总共有四种比较，如果都没匹配，如果设置了key，对key进行比较。
   在比较过程中，如果start大于end，就比较结束

   eg：如果老的start匹配上新的end，就把dom的第一个插入真实的最后
   如果都没成功，遍历老的节点，挨个匹配，匹配成功就把节点插入，没有成功，就把新节点插入对应的dom中