结合源码，谈谈对vue中diff算法的理解

源码分析1：必要性，lifecycle.js-mountComponent()
源码分析2：执行方式，patch.js - patchVnode()
源码分析3：高效性，patch.js-updateChildren()

1.测试代码

2.源码分析

2.1必要性

首先mountComponent方法是由$mount调用的。也就是任何一个vue组件的实例，在它创建完成之后，要挂载的时候去调用mountComponent方法。

那么一个组件会调用一次$mount,那么一个组件就会创建一个watcher。这就意味着在vue中，watcher实例和组件实例是一一对应的了。

那么问题来了，在vue组件中可能存在很多个data中的key使用，但是我们只有一个watcher，如何确保哪个key发生了变化呢？所以diff算法就很必要了，因为当界面中多个key发生变化的时候，执行一次diff算法，进行新旧两次虚拟dom的比较，就能比出变化的地方。

2.2 执行方式

patchVnode是diff发生的地方，整体策略是：深度优先，同层比较，也就是先判断有没有子节点，再进行同层比较

2.3 高效性

updateChildren这个方法里面就是先用四种情况对新旧节点进行判断，如果在首尾都没有找到相同节点，再开始遍历查找

3.总结：

• 1.定义：diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比(即diff) ，将变化的地方更新在真实DOM 上;另外,也需要diff高效的执行对比过程,从而降低时间复杂度为O(n)。
• 2.必要性：vue 2.x中为了降低Watcher粒度,每个组件只有一个Watcher与之对应,只有引入diff才能精确找到发生变化的地方。
• 3.执行过程：vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称为patch。
• 4.diff过程整体遵循深度优先、同层比较的策略;两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作;比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点;借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。
• 5.更详细的过程：当修改一个数据，由于数据响应式触发了setter，setter会触发通知，而通知的方式是尝试把watcher添加到异步更新队列中，在每一次事件循环后清空队列，在清空队列的过程中，所有的watcher尝试去执行它们的更新函数，那这些更新函数在执行的时候，其实调用了组件的更新函数和渲染函数，这时会重新渲染虚拟dom，然后执行更新函数，比较新旧的虚拟dom。