用vue想拿20k，面试题要这样答！--第四集 怎么理解vue中的diff算法

凸逼諵啵丸:
1. diff 算法是虚拟dom生成的必然产物，通过新旧dom比较，将变化的地方更新到真是的dom上，另外也需要diff的高效执行来降低意见复杂度 2.vue2.x中为了降低watcher的粒度， 每一个组件都只有一个watcher与之对应，只有引入diff算法才能准确的找到发生变化的地方。 3. vue中的diff的执行时刻是组件实例执行其更新函数时，他会对比上一次的俨然结果oldVnodeh和新的渲染结果newVnode,此过程成为patch. 4. diff 过程整体遵循 深度优先，同层比较。两个节点之间比较即根据它们是否拥有子节点或者文本节点做不同的操作，比较两组节点是diff的重点，首先假设头尾节点可能相同做4次节点比对尝试，如果找到相同的节点，按照通用方式遍历查找，查找结束才按情况处理剩下的节点，借助key通常可以非常精确的找到相同的节点，因此整个patch 会很高效

【回复】感觉楼主讲的牛，很细致，但是我消化不了
Doris在行动:
说的太好了，可我说不出来，有没有同感的

Society丶Jie:
来当课代表： 1. 首先，diff是一种算法，它是虚拟dom使用过程中的必然产物，因为我既然选择了一种中介的虚拟DOM的方式，将来如果数据变化，一定会产生虚拟DOM的变化，虚拟DOM的变化需要找到它所对应的真实DOM的变化，这就需要比较新旧虚拟dom来找到变化，这就是diff，只要用到虚拟DOM，那就一定会用到diff算法。 2. 那么在这个过程中，diff还有它的必要性，在vue中，为了降低watcher的粒度， 每一个组件都只有一个watcher与之对应，为了能精准的找到发生变化的地方，我们需要diff算法。 3. 那么什么时候会触发diff呢，当我们修改数据的时候，由于数据响应式，触发了setter，setter会触发通知，watcher数组里所有的watcher就会执行它们的更新函数，更新函数在执行的时候调用了组件的渲染和更新函数，这时候会重新渲染最新的虚拟DOM，比较新旧虚拟DOM，这个时刻是diff真正执行触发的时刻，在进行新旧DOM对比的过程中，这个过程我们称之为打补丁，patch。 4. diff执行的过程遵循深度优先，同层比较的策略。深度优先是指，两个节点之间比较的时候，先会判断一下它们是否拥有子节点或者文本节点来做不同的操作，diff算法最核心的地方是两组子节点的比较，我着重跟您说一下这块儿，这一块儿最重要的优化策略是先尝试把这两组首尾的4个节点进行两两比较，有4种方式，尝试找出相同节点，多数情况下首尾总是能找到相同的，那这样的话可以减少循环次数，避免大量的循环查找，如果很不幸没有找到相同节点，那么只能按照传统的方式遍历查找，当找到这些节点后，会对它进行patch，可是有可能会找不到，找不到就把它们剩下，剩下的这些节点要么批量的删除，要么批量的新增，在这个过程中可以借助key非常精确的找到相同的节点，因此整个patch过程会非常高效。 这就是我对diff算法的一个理解，不知道说的有没有不合理的地方，请您指点。