vue2.0源码解析（中）

今天我们了解一下vue中批量异步更新策略和虚拟DOM以及Diff算法

异步更新策略

1、update() core\observer\watcher.js dep.notify()之后watcher执行更新，执行入队操作
由此，我们找到对应的文件。

WeChat2ee892be29fa2890da2bc96cb706452a.png

由图片我们发现一个watcher入队操作。点进去会跳到core\observer\scheduler.js文件。

WeChatb693342c16fe5b3734906c465f186640.png

vue会判断watcher是否已经入队，如果已经入队，就不再入队。然后点进nextTIck,我们就能看到nextTick（）是如何刷新队列的工作原理。
3、进入nextTicke()函数。

WeChatce626d454ae127b4f08e45f13eb314d0.png

4、点进timerFunc(),启动异步任务的函数。

会发现，调用异步任务的方式，首选是promise
异步操作，如果用户所使用的设备不支持promise异步，则使用MutationObserver、如果MutationObserver不行则使用setImmediate、如果setImmediate也不能使用，最后就会使用宏任务setTimeout方式进行更新。
5、回到nextTick（flushSchedulerQueue）,点击flushSchedulerQueue队列。会看到一个run()方法是执行真正的更新方法。

WeChat231d39962f5aa7a075c3d343294fda4c.png

6、在run方法中有一个get（）方法，我们点进去查看。

WeChat76c183a774441a957431da5a6de2756f.png

7、进入到get（）方法里面，我们会发现，执行了一个getter（）函数。

WeChata6885617e41e0fbd04e074fcec52efcf.png

8、查看getter方法会发现，getter是一个被赋值的函数，这个时候我们就需要从vue初始化查看watcher。

WeChata6885617e41e0fbd04e074fcec52efcf.png

9、知道src/core/instance/lifecycle.js文件，查看一下组件初始化。会发现，在执行mountComponent（）组件初始化时，会创建一个组件更新函数updateComponent，以及创建 组件级watcher。在创建watcher时会把updateComponent更新函数传进去。

WeChat41b1481d41c0c53beaa98ac4f086cce2.png

WeChatf67af105886ad56cb51156d1f2687349.png

至此，我们就可以梳理出来整个更新流程了。
流程如下：当有组件内部有数据进行更新时 => set() => dep.notify() => queueWatcher => nextTick(flushSchedulerQueue) => flushSchedulerQueue => watcher.run() => updateComponent => render => update => patch
nextTtick：做的事情就是把回到函数放进到callbacks队列中。

diff算法：

vue中主要使用的是patch函数进行diff算法。文件路径：core\vdom\patch.js。
diff算法的原则是：同级比较深度优先。

1、首先进行树级别比较，可能有三种情况：增删改。

new VNode不存在就删；
old VNode不存在就增；
都存在就执行diff执行更新

2、patchVnode

比较两个VNode，包括三种类型操作：属性更新、文本更新、子节点更新
具体规则如下：

1. 新老节点均有children子节点，则对子节点进行diff操作，调用updateChildren
2. 如果新节点有子节点而老节点没有子节点，先清空老节点的文本内容，然后为其新增子节点。
3. 当新节点没有子节点而老节点有子节点的时候，则移除该节点的所有子节点。
4. 当新老节点都无子节点的时候，只是文本的替换。

3、updateChildren

在新老两组VNode节点的左右头尾两侧都有一个变量标记，在遍历过程中这几个变量都会向中间靠拢。 当oldStartIdx > oldEndIdx或者newStartIdx > newEndIdx时结束循环。
首先，oldStartVnode、oldEndVnode与newStartVnode、newEndVnode两两交叉比较，共有4种比较方法。
1、当 oldStartVnode和newStartVnode 或者 oldEndVnode和newEndVnode 满足sameVnode，直接将该VNode节点进行patchVnode即可，不需再遍历就完成了一次循环。
2、如果oldStartVnode与newEndVnode满足sameVnode。说明oldStartVnode已经跑到了oldEndVnode后面去了，进行patchVnode的同时还需要将真实DOM节点移动到oldEndVnode的后面。
3、如果oldEndVnode与newStartVnode满足sameVnode，说明oldEndVnode跑到了oldStartVnode的前面，进行patchVnode的同时要将oldEndVnode对应DOM移动到oldStartVnode对应DOM的前面。
4、如果以上情况均不符合，则在old VNode中找与newStartVnode相同的节点，若存在执行
patchVnode，同时将elmToMove移动到oldStartIdx对应的DOM的前面。
当然也有可能newStartVnode在old VNode节点中找不到一致的sameVnode，这个时候会调用
createElm创建一个新的DOM节点。
5、最后进行扫尾的批量删除或者批量新增操作
当结束时oldStartIdx > oldEndIdx，这个时候旧的VNode节点已经遍历完了，但是新的节点还没有。说明了新的VNode节点实际上比老的VNode节点多，需要将剩下的VNode对应的DOM插入到真实DOM中，此时调用addVnodes（批量调用createElm接口）。
但是，当结束时newStartIdx > newEndIdx时，说明新的VNode节点已经遍历完了，但是老的节点还有剩余，需要从文档中删 的节点删除。
key的作用
判断两个vnode是否相同节点，必要条件之一。
我们找到core\vdom\patch.js文件，有一个patch函数。

WeChat96eaf7dafce1b3c9d3b69a030dc3f5b6.png

有一个更新patchVnode函数。点进去查看。

WeChatb3b9082f6ca9e8c3dd810a710e22e2b2.png

再patchVnode函数中，可以看到先进行属性更新，然后进行文本更新、最后进行子节点的更新。再点进去查看updateChildren函数。

WeChat40a5deed29d0ca44f50171806b3ac1fe.png

WeChat3cecca2920726d6518dd179dcd54d010.png

updateChildren是diff算法发生的地方，就是回创建四个游标，进行四种情况的判断，最后进行扫尾工作。具体代码看图片注释。
附：vue是如何判断一个节点是否相同的。
再patch文件下：找到sameVnode函数，如下图：

WeChat3cf8dc341442e942cb56af65c8b02e30.png

具体步骤如下：
1、判断key是否相同。
2、判断是否是相同元素。
3、判断数据是否相同。
4、判断input的属性是否相同。