Vue的虚拟dom

一，vdom（virtual dom）

    用js模拟dom结构，计算出最小的变更，操作dom

二，diff算法概述

    1，diff即对比，是一个广泛的概念

    2，两个js对象也可以做diff

    3，两棵树做diff，如这里的vdom diff

三，树diff和vdom的diff

    1，树diff的时间复杂度O（n^3）

        1），遍历tree1，遍历tree2...

        2），排序

        3），1000个节点，要计算1亿次，算法不可用

    2，vdom的diff算法，优化时间复杂度到O（n）

        1），只比较同一层级，不跨级比较

        2），tag不相同，则直接删掉重建，不再深度比较

        3），tag和key，两者都相同，则认为是相同节点，不再深度比较

三，用js模拟DOM结构

js数据结构

html数据格式

四，生成vnode（借鉴snabbdom.js）（h函数返回vnode）

VNode类

VNodeData数据格式

    1，最主要是属性：tag(比如：div，p，span)、data、children、key、text

    2，VNode分为以下几类

        1），TextVNode 文本节点。

        2），ElementVNode 普通元素节点。

        3），ComponentVNode 组件节点。

        4），EmptyVNode 没有内容的注释节点。

        5），CloneVNode 克隆节点，可以是以上任意类型的节点，唯一的区别在于isCloned属性为true

五，patch函数的diff算法将改变渲染到dom上（patch(elem,vnode)和patch(vnode,newVnode)）

patch函数

    1，判断是否为vnode

判断标签是否存在

    2，创建一个空的vnode，关联到这个dom元素(Element)

创建空vnode

    3，比较vnode是否相同

比较vnode的key和标签

    4，patchVnode：这个函数做的事情是对传入的两个 vnode 做 diff，如果存在更新，将其反馈到 dom 上

patchVnode函数

        1），hooks：更新节点属性

        2），updateChildren（https://juejin.im/post/5b9200865188255c672e8cfd）

            1，新旧节点的开始和开始比较

            2，新旧节点的结束和结束比较

            3，新旧节点的开始和结束比较

            4，新旧节点的结束和开始比较

            5，新旧节点开始或者结束节点为空

            6，比较新节点在旧节点中的key和tag（标签）

            7，key的重要性（key使用固定的数值，不能使用随机数）

key使用和不使用的区别

        3），removeVnodes

removeVnodes函数

        4），addVnodes

addVnodes函数

六，总结

    1，vdom核心概念：h，vnode，patch，diff，key等

    2，vdom存在的价值：数据驱动视图，控制dom操作