虚拟DOM&Diff算法

什么是虚拟DOM 链接到标题

一个用来表示真实DOM的对象

<ul id="list">
    <li class="item">哈哈</li>
    <li class="item">呵呵</li>
    <li class="item">嘿嘿</li>
</ul>

let oldVDOM = { // 旧虚拟DOM
        tagName: 'ul', // 标签名
        props: { // 标签属性
            id: 'list'
        },
        children: [ // 标签子节点
            {
                tagName: 'li', props: { class: 'item' }, children: ['哈哈']
            },
            {
                tagName: 'li', props: { class: 'item' }, children: ['呵呵']
            },
            {
                tagName: 'li', props: { class: 'item' }, children: ['嘿嘿']
            },
        ]
    }

虚拟DOM算法操作真实DOM，性能高于直接操作真实DOM

什么是diff算法 —- vue2 链接到标题

diff 算法是一种通过同层的树节点进行比较的高效算法，深度优先算法。时间复杂度:O(n)

其有两个特点：

•比较只会在同层级进行, 不会跨层级比较

•在diff比较的过程中，循环从两边向中间比较

流程：

当数据改变时，会触发setter，并且通过Dep.notify去通知所有订阅者Watcher，订阅者们就会调用patch方法，给真实DOM打补丁，更新相应的视图。

分为多种情况：

patch方法：接收两个参数，oldVnode newVnode

如果这俩相同（判断标注：key、标签名、input框要求type相同、是否都有data），那么继续向深层比较

如果这两个对象 === 比完一样，那么终止

如果节点类型一样，但是内容不一样，则用newVnode 里面的替换掉旧的

他们的孩子处理：多了添加，少了删除，如果都有孩子，那么就要进行 updateChildren

如果这俩不相同，替换就行了

const oldEl = oldVnode.el; //旧虚拟节点的真实DOM节点 ,为了拿到他的父节点
const parentEl = api.parentNode(oldEl) // 拿到原本的父节点
createEl(newVnode); //创建新虚拟节点对应  的真实dom
if(parentEl!==null) {
    api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 将新元素添加进父元素
    api.removeChild(parentEle, oldVnode.el)  // 移除以前的旧元素节点
    oldVnode = null
}
return newVnode

updateChildren 链接到标题

对比的方法就是首尾指针法：

新的子节点集合和旧的子节点集合，各有首尾两个指针

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

修改数据后

<ul>
    <li>b</li>
    <li>c</li>
    <li>e</li>
    <li>a</li>
</ul>

然后会进行互相进行比较，总共有五种比较情况：

oldS = a, oldE = c
newS = b, newE = a

1、oldS 和 newS 使用sameVnode方法进行比较，sameVnode(oldS, newS)
2、oldS 和 newE 使用sameVnode方法进行比较，sameVnode(oldS, newE)
3、oldE 和 newS 使用sameVnode方法进行比较，sameVnode(oldE, newS)
4、oldE 和 newE 使用sameVnode方法进行比较，sameVnode(oldE, newE)
5、如果以上逻辑都匹配不到，再把所有旧子节点的 key 做一个映射到旧节点下标的 key -> index 表，然后用新 vnode 的 key 去找出在旧节点中可以复用的位置。