vue-diff算法-snabbdom

前言

vue的diff算法参考自snabbdom

本文将介绍snabbdom的使用 从而深入理解vue的diff算法，工程文件请参考snabbdom文件夹。

1. 实例

直接到github的snabbdom去复制实例来使用

2. 真实dom和虚拟dom

在开篇我们讨论过为什么说虚拟dom的性能优于真实dom，这里再重新验证一遍

diff算法比较的虚拟dom，虚拟dom的成员比较少，比较性能上自然也比较出色

2.1 真实dom

//一个对象 非常多的成员
div#container

2.2 虚拟dom的

//snabbdom的虚拟dom对象 成员较少
{
    "sel": "div#container.two.classes",
    "data": {
        "on": {}
    },
    "children": [
        {
            "sel": "span",
            "data": {
                "style": {
                    "fontWeight": "bold"
                }
            },
            "text": "粗体",
            "elm": {}
        },
        {
            "sel": "br",
            "data": {},
            "elm": {}
        },
        {
            "text": "这是一个普通的文本",
            "elm": {}
        },
        {
            "sel": "br",
            "data": {},
            "elm": {}
        },
        {
            "sel": "a",
            "data": {
                "props": {
                    "href": "https://www.baidu.com"
                }
            },
            "text": "跳转到百度",
            "elm": {}
        },
        {
            "sel": "br",
            "data": {},
            "elm": {}
        },
        {
            "sel": "button",
            "data": {
                "on": {}
            },
            "text": "patchNewVnode",
            "elm": {}
        }
    ],
    "elm": {}
}

3. 虚拟dom的key对性能的影响

注意，这里讨论的性能是虚拟dom之间，和真实dom无关。

key是唯一标识，加上key,那么diff算法就能知道每个节点的真实情况，根据情况进行相应操作，提高性能

例如，js代码上，只是对虚拟dom的节点顺序进行调换

3.1 情况一：

没有使用key就会重新的删除创建

(1)有三个li节点,内容为abc

(2)将其修改为aaabbbccc

(3)置换成新的vdom，发现创建了新dom，那么这种情况性能开支就很大了

3.2 情况二：

使用了key就只是更改顺序

原图

可以看到只是改变了顺序

由此我们得出使用key是会提升性能的，因为没有使用key的话，仅仅只是调换节点的顺序就会使用创建删除操作，资源开支大。

4. 新老节点替换规则

1、如果新老节点不是同一个节点名词，那么就暴力删除旧的节点，创建插入新节点。

2、只能是同级比较。跨级，例如在源节点上添加一个父节点，就会创建插入新节点。