vue考点 —— Diff算法

一、什么是diff算法

1、linux中的diff命令，比如diff one.txt  two.txt。结果是展示出两个文件的不同。

在同一文件夹下面建立两个txt文件，只要内容不完全相同就可以，然后执行diff命令

2、git  diff查看一个文件的两个版本的区别

假设我们修改了上述的log1.txt，然后执行git  diff  log1.txt

二、vdom为何用diff算法

• DOM操作是昂贵的，因此尽量减少DOM操作
• 找出本次DOM必须更新的节点来更新，其他的不更新
• 这个‘找出’的过程，就需要diff算法

四、diff算法的实现流程

1、patch（container，vnode）

如何将vnode（左边）变成真实的DOM元素（右边）

 实现方法如下：

function createElement(vnode){
    var tag = vnode.tag
    var attrs = vnode.attrs || {}
    var children = vnode.children || []
    if(!tag){
        return null
    }
    var elem = document.createElement(tag)
    var attrName
    for(attrName in attrs){
        if(attrs.hasOwnProperty(attrName)){
            elem.setAttribute(attrName, attrs[attrName])
        }
    }
    children.forEach(function(childVnode){
        elem.appendChild(createElement(childVnode))
    })
    return elem
}

2、patch（vnode, newVnode)

container里面已经有了内容，更新时做对比的过程该如何实现。

实现如下：

function updateChildren(vnode, newVnode){
    var children = vnode.children || []
    var newChildren = newVnode.children || []
    children.forEach(function(child, index){
        var newChild = newChildren[index]
        if(newChild == null){
            return
        }
        if(child.tag === newChild.tag){
            updateChildren(child, newChild)
        } else {
            replaceNode(child, newChild)
        }
    })
}
function replaceNode(vnode, newVnode){
    var elem = vnode.elem
    var newElem = createElement(newVnode)
    return elem
}

 五、题目解答

• 什么是diff算法，是linux的基础命令
• vdom中应用diff算法是为了找出需要更新的节点
• diff算法的实现，关注patch。
• 核心逻辑。createElement和updateChildren