一、概述
（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節點進行更新