Vue的diff 算法总结

基本流程：数据改变-->虚拟DOM（计算变更）-->操作真实DOM-->视图更新

Diff算法：

当数据发生改变时，set方法会调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图

先遍历老节点，再遍历新节点，比较只会在同层级进行, 不会跨层级比较

1，了解节点对象：

{sel（选择器,div），data(样式)，childre（）||text(),elm(对应的真实DOM元素)，key}

2，path函数：

        1）使用场景：

                       1页面首次渲染的时候执行，把vnode渲染到空的容器中  path(container,vnode)

                        2数据更新时，新节点替换老节点  path(vnode,newnode)

        2）函数具体内容：

                        1第一个参数不是vnode类型，初始化状态，全部新建DOM元素

                        2，是vnode类型，调用samvnode函数（比较传入的两个节点的key和sel）

                             相同：调用pathVnode函数

                            不相同：通过createElm创建DOM元素,插入新的DOM元素，删除老的DOM元素

3，pathVnode函数（当key和sel相同的时候调用）

        1）函数主要内容：

                对比两个节点的children或者（text）,如果相同，直接返回，如果不同，一切以新的vnode为准

                1,新vnode有children，旧的需要删除原来的text，添加新的children，或者更新children

                2,新vnode有text，旧的需要删除原来的children，添加新的text，或者更新text

                3,新老vnode 都有children ，更新children的时候需要用updateChildren

4,UpdateChildren函数：

                1,新节点的start与旧节点的start比较，,新节点的start与旧节点的end比较,新节点的end与旧节点的start比较，,新节点的end与旧节点的end比较，（start++,end--）

                2，如果相同，调用pathVnode函数

                3，如果都不相同：拿到新节点中第一个孩子的key,与老节点的所有孩子的key比较，找不到，直接创建DOM元素，找到了（key相等）再比较sel,如果sel不相等，创建DOM元素，如果sel相等，递归调用pathVnode函数