Skip to content

Vue的diff算法

虚拟dom

它只是一层对真实DOM的抽象,以JavaScript 对象 (VNode 节点) 作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作使这棵树映射到真实环境上

vdom例子:

js
{
    "sel": "div",
    "data": {
        "id": "container"
    },
    "children": [
        {
            "sel": "div",
            "data": {
                "class": "message"
            },
            "text": "Hello World"
        }
    ]
}
// sel: 标签名
// data: 标签属性
// text: 标签之间的文本内容
// children:子元素

什么是diff算法

diff算法的作用就是找出两组vdom节点之间的差异,并尽可能的复用dom节点,使得能用最小的性能消耗完成更新操作。

简单diff算法

双端diff算法

快速diff算法