深入浅出vue.js----patch

一、概述

（1）虚拟DOM最核心的部分是path，它可以将vnode渲染成真实的DOM。

（2）patch也可以叫作patching算法，通过它渲染真实DOM时，并不是暴力覆盖原有DOM，而是比对新旧两个vnode之间有哪些不同，然后根据对比结果找出需要更新的节点进行更新。

（3）patch本身就有补丁、修补等意思，其实际作用是在现有DOM上进行修改来实现更新视图的目的。

（4）原因：DOM操作的执行速度远不如Javascript的运算速度快。因此，把大量的DOM操作搬运到Javascript中，使用patching算法来计算真正需要更新的节点，最大限度地减少DOM操作，从而显著提升性能。这本质上其实是使用Javascript的运算成本来替换DOM操作的执行成本，而Javascript的运算速度要比DOM快很多，这样做很划算，所以才会有虚拟DOM。

二、patch介绍

（1）对比两个vnode之间的差异只是patch的一部分，这是手段，而不是目的。

（2）patch的目的其实是修改DOM节点，也可以理解为渲染视图。

（3）patch不是暴力替换节点，而是在现有DOM上进行修改来达到渲染视图的目的。

（4）对现有的DOM进行修改需要做三件事:

• 创建新增的节点
• 删除已经废弃的节点
• 修改需要更新的节点

（5）patch的过程其实就是创建节点、删除节点和修改节点的过程。

（6）渲染视图的标准是以vnode（使用最新状态创建的vnode）来渲染而不是oldVnode（上一次渲染DOM所创建的vnode）。

（7）当oldVnode和vnode不一样的时候，以vnode为准来渲染视图。

三、新增节点

（1）如果一个节点已经存在于DOM中，那就不需要重新创建一个同样的节点去替换已经存在的节点。

（2）事实上，只有那些因为状态的改变而新增的节点在DOM中并不存在时，我们才需要创建一个节点并插入到DOM中。

（3）新增节点的场景1：当oldVnode不存在而vnode存在时，就需要使用vnode生成真实的DOM元素并将其插入到视图当中去。

1、这通常会发生在首次渲染中。因为首次渲染时，DOM中不存在任何节点，所以oldVnode是不存在的。

（4）新增节点的场景2：当vnode和oldVnode完全不是同一个节点时，需要使用vnode生成真实的DOM元素并将其插入到视图当中去。

1、当vnode和oldVnode完全不是同一个节点时，可以得知vnode就是一个全新的节点，而oldVnode就是一个被废弃的节点。

2、这种情况下，需要做的事就是使用vnode创建一个新DOM节点，用它去替换oldVnode所对应的真实DOM节点。

四、删除节点

（1）当一个节点只在oldVnode中存在时，需要把它从DOM中删除。因为渲染视图时，需要以vnode为标准，所以vnode中不存在的节点都属于被废弃的节点，而被废弃的节点需要从DOM中删除。

（2）当vnode和oldVnode完全不是同一个节点时，在DOM中需要使用vnode创建的新节点替换oldVnode所对应的旧节点，而替换过程是将新创建的DOM节点插入到旧节点的旁边，然后再将旧节点删除，从而完成替换过程。

五、更新节点

（1）新增、删除节点有一个共同点：两个虚拟节点完全不同

（2）当新旧两个节点是相同的节点时，需要对这两个节点进行比较细致的比对，然后对oldVnode在视图中所对应的真实节点进行更新。

六、小结

path过程

（1）当oldVnode不存在时，直接使用vnode渲染视图。

（2）当oldVnode和vnode都存在但并不是同一个节点时，使用vnode创建的DOM元素替换旧的DOM元素。

（3）当oldVnode和vnode是同一个节点时，使用更详细的对比操作对真实的DOM节点进行更新