一、什麼是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