源码分析1：必要性，lifecycle.js - mountComponent()
由下图可知，每一个组件挂载的时候，都会对应的创建一个watcher（即：一个组件只对应一个watcher，降低了Watcher粒度）
但是组件中可能存在很多个data中的key使用, 那么要怎么确定哪个key发生了变化呢？
就要靠diff算法了（diff通过新旧虚拟dom的对比来知道这些变化）
源码分析2：执行方式，patch.js - patchVnode()
patchVnode是diff发生的地方，整体策略：深度优先，同层比较
源码分析3：高效性，patch.js -updateChildren()
测试代码：
<!DOCTYPE html>
<html>
<head>
<title>Vue源码剖析</title>
<script src="../../dist/vue.js"></script>
</head>
<body>
<div id="demo">
<h1>虚拟DOM</h1>
<p>{{foo}}</p>
</div>
<script>
// 创建实例
const app = new Vue({
el: '#demo',
data: { foo: 'foo' },
mounted() {
setTimeout(() => {
this.foo = 'fooooo' }, 1000);
}
});
</script>
</body>
</html>
总结
1.diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diff），将变化的地方更新在真 实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。 开课吧web全栈架构师
2.vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到 发生变化的地方。
3.vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染 结果newVnode，此过程称为patch。 【 到底怎么触发的diff呢？
是因为watcher的调用，当我们修改一个数据的时候，由于数据响应式触发了setter，setter中会触发通知，通知时，会把watcher添加的异步更新队列。每一次事件循环结束时，会清空这些队列，在清空队列的过程中，所有的watcher会尝试更新他们的更新函数，这些更新函数在执行的时候，其实调用了组件的更新函数以及组件的渲染函数，这时候会重新渲染最新的虚拟dom,然后执行更新函数，比较新旧的虚拟dom,这个时刻就是diff真正的触发时刻、执行时刻；在进行新旧dom对比的过程中，我们称这个过程为打补丁——patch】
4.diff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文 本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果 没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助key通常可以非 常精确找到相同节点，因此整个patch过程非常高效。
