Vue虚拟dom和diff算法源码解析

虚拟dom

一个虚拟dom的结构

{
     
    tag:'div',
    props:{
     
        className:'container',
        id:'div1'
    },
    children:[
        {
     
            tag:'p',
            children:'text'
        },
        {
     
            tag:'ul',
            props:{
     
                style:'color:red'
            },
            children:[
                {
     
                    tag:'li',
                    props:{
     
                        className:'item'
                    }
                },
                //......
            ]
        }
    ]
}

学习vdom(snabbdom)

树 diff的事件复杂度是O(n^3)

每个节点分别与另一棵树的每个节点进行对比, 总共查找的时间复杂度是O(n^2)
查找完之后进行转换,(具体略), 总共时间复杂度变为O(n^3)

优化时间复杂度到O(n)

只比较同一层级, 不跨级比较
tag不相同, 直接删掉重建, 不再深度比较
tag和key都相同, 则认为是相同节点, 不再深度比较

snabbdom.js学习

• h(type, data, children)，返回 Virtual DOM 树。
• patch(oldVnode, newVnode)，比较新旧 Virtual DOM 树并更新。↓
• sameVnode函数正是通过判断sel和key是否都相同来判断的, 正好符合上述优化规则 ↓
• patchVnode通过判断新旧节点的children和text进行一系列相应的操作 ↓
• updateChildren 新旧节点都有children时的对比操作, 依次判断,再进行↑

因此, key使用index根本没有用, 并不能通过key找到相同节点从而减少渲染成本

总结

• 细节不重要, updateChildren的过程也不重要, 不要深究
• vdom核心概念很重要: h, vnode, patch, diff, key
• vdom存在的价值更加重要: 数据驱动视图, 控制dom操作