一、虛擬dom
1、什麼是虛擬dom
以往，我們改變更新頁面，只能透過首先查詢dom物件，再進行修改dom的方式來達到目的。 但這種方式相當消耗計算資源， 因為每次查詢 dom ，都需要遍歷整顆 dom 樹。現在，我們用物件的方式來描述真實的 dom，並且透過物件與真實dom建立了一一對應的關係，那麼每次 dom 的更改，透過找到相應物件，也就找到了相應的dom節點，再對其進行更新。這樣的話，就能節省效能，因為js物件的查詢，比對整個dom 樹的查詢，所消耗的效能要少。
2、虛擬dom的實現原理
虛擬 dom 相當於在 js 和真實 dom 中間加了一個快取，利用 dom diff 演算法避免了沒有必要 的 dom 操作，從而提高效能。具體如下：
①初始化虛擬 DOM 樹：在應用程式載入時，會根據當前頁面的狀態和元件結構構建初始的虛擬 DOM 樹。這個虛擬 DOM 樹是一個 JavaScript 物件樹，它對應著實際 DOM 結構的輕量級表示。
②狀態變更觸發更新：當應用程式狀態發生變化時，比如使用者互動導致資料變化，框架會觸發重新渲染過程。在這個過程中，新的虛擬 DOM 樹會被構建出來，代表了應用狀態更新後的頁面結構。
③虛擬 DOM 比較：新的虛擬 DOM 樹和舊的虛擬 DOM 樹會被進行比較，找出兩者之間的差異。這個過程通常使用一種叫做"diffing algorithm"的演算法來進行，它會盡可能高效地找出兩個樹之間的最小變更集合。
④生成更新補丁：根據比較的結果，生成描述如何更新實際 DOM 的操作序列，通常稱為“補丁”（patch）或“更新”（update）。
⑤應用更新到實際 DOM：最後，將生成的更新補丁應用到實際的 DOM 上，更新頁面內容。這個過程可能會使用一些最佳化策略，比如批次更新，以提高效能。