vue 虚拟DOM patch算法

Question

patch算法是通过什么判断新旧vnode节点是否相同的，是id么？还是vnode中存了dom对象做对比？还是另外的什么？

换句话说，我怎么通过新vnode中的节点找到他在旧vnode中的位置？

Answer 1

vue 当然是能够获取到 update 前的老的组件树的，patch 算法里面定义了一堆规则，去匹配新老组件树的差异，找到最匹配的节点进行最小幅度的 update，或者说最大程度的重用。具体匹配规则你可以去看源码，包括在组件树上的位置啦，有没有子节点啊，文本内容是否相同啊等等。有一个很简单的办法可以提高 patch 的效率，就是给 vNode 加上 key，明确告诉 vue 这是同一个节点。

当然这种通用的 diff 函数并不是效率最高的，极限情况下还有出错的可能(比如把本该重用的 vNode 注销了，又重建了一个新的 vNode)，但是客观地说 vue 做得相当不错。要知道 patch 本身是一种概率算法，不存在100%的准确性。