vue考点 —— Diff算法

一、什么是diff算法

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

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

vue考点 —— Diff算法_第1张图片

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

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

vue考点 —— Diff算法_第2张图片

二、vdom为何用diff算法

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

四、diff算法的实现流程

1、patch(container,vnode)

如何将vnode(左边)变成真实的DOM元素(右边)

vue考点 —— Diff算法_第3张图片

 实现方法如下:

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里面已经有了内容,更新时做对比的过程该如何实现。

vue考点 —— Diff算法_第4张图片

实现如下:

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

你可能感兴趣的:(vue.js)