這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. 對虛擬DOM的理解？ 從本質上來說，Virtual Dom是一個JavaScript對象，通過對象的方式來表示DOM結構。將頁面的狀態抽象為JS對象的形式，配合不同的渲染工具，使跨平臺渲染成為可能。通過事務處理機制，將多次DOM修改 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
1. 對虛擬DOM的理解？
從本質上來說，Virtual Dom是一個JavaScript對象，通過對象的方式來表示DOM結構。將頁面的狀態抽象為JS對象的形式，配合不同的渲染工具，使跨平臺渲染成為可能。通過事務處理機制，將多次DOM修改的結果一次性的更新到頁面上，從而有效的減少頁面渲染的次數，減少修改DOM的重繪重排次數，提高渲染性能。
虛擬DOM是對DOM的抽象，這個對象是更加輕量級的對 DOM的描述。它設計的最初目的，就是更好的跨平臺，比如Node.js就沒有DOM，如果想實現SSR，那麼一個方式就是藉助虛擬DOM，因為虛擬DOM本身是js對象。 在代碼渲染到頁面之前，vue會把代碼轉換成一個對象（虛擬 DOM）。以對象的形式來描述真實DOM結構，最終渲染到頁面。在每次數據發生變化前，虛擬DOM都會緩存一份，變化之時，現在的虛擬DOM會與緩存的虛擬DOM進行比較。在vue內部封裝了diff演算法，通過這個演算法來進行比較，渲染時修改改變的變化，原先沒有發生改變的通過原先的數據進行渲染。
另外現代前端框架的一個基本要求就是無須手動操作DOM，一方面是因為手動操作DOM無法保證程式性能，多人協作的項目中如果review不嚴格，可能會有開發者寫出性能較低的代碼，另一方面更重要的是省略手動DOM操作可以大大提高開發效率。
2. 虛擬DOM的解析過程
虛擬DOM的解析過程：
- 首先對將要插入到文檔中的 DOM 樹結構進行分析，使用 js 對象將其表示出來，比如一個元素對象，包含 TagName、props 和 Children 這些屬性。然後將這個 js 對象樹給保存下來，最後再將 DOM 片段插入到文檔中。
- 當頁面的狀態發生改變，需要對頁面的 DOM 的結構進行調整的時候，首先根據變更的狀態，重新構建起一棵對象樹，然後將這棵新的對象樹和舊的對象樹進行比較，記錄下兩棵樹的的差異。
- 最後將記錄的有差異的地方應用到真正的 DOM 樹中去，這樣視圖就更新了。
3. 為什麼要用虛擬DOM
（1）保證性能下限，在不進行手動優化的情況下，提供過得去的性能
看一下頁面渲染的流程：解析HTML -> 生成DOM -> 生成 CSSOM -> Layout -> Paint -> Compiler
下麵對比一下修改DOM時真實DOM操作和Virtual DOM的過程，來看一下它們重排重繪的性能消耗∶
- 真實DOM∶ 生成HTML字元串＋重建所有的DOM元素
- 虛擬DOM∶ 生成vNode+ DOMDiff＋必要的dom更新
Virtual DOM的更新DOM的準備工作耗費更多的時間，也就是JS層面，相比於更多的DOM操作它的消費是極其便宜的。尤雨溪在社區論壇中說道∶ 框架給你的保證是，你不需要手動優化的情況下，依然可以給你提供過得去的性能。
（2）跨平臺
Virtual DOM本質上是JavaScript的對象，它可以很方便的跨平臺操作，比如服務端渲染、uniapp等。
4. 虛擬DOM真的比真實DOM性能好嗎
- 首次渲染大量DOM時，由於多了一層虛擬DOM的計算，會比innerHTML插入慢。
- 正如它能保證性能下限，在真實DOM操作的時候進行針對性的優化時，還是更快的。
5. DIFF演算法的原理
在新老虛擬DOM對比時：
- 首先，對比節點本身，判斷是否為同一節點，如果不為相同節點，則刪除該節點重新創建節點進行替換
- 如果為相同節點，進行patchVnode，判斷如何對該節點的子節點進行處理，先判斷一方有子節點一方沒有子節點的情況(如果新的children沒有子節點，將舊的子節點移除)
- 比較如果都有子節點，則進行updateChildren，判斷如何對這些新老節點的子節點進行操作（diff核心）。
- 匹配時，找到相同的子節點，遞歸比較子節點
在diff中，只對同層的子節點進行比較，放棄跨級的節點比較，使得時間複雜從O(n3)降低值O(n)，也就是說，只有當新舊children都為多個子節點時才需要用核心的Diff演算法進行同層級比較。
6.vue 中 key 值的作用可以分為兩種情況來考慮：
- 第一種情況是 v-if 中使用 key。由於 Vue 會儘可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。因此當使用 v-if 來實現元素切換的時候，如果切換前後含有相同類型的元素，那麼這個元素就會被覆用。如果是相同的 input 元素，那麼切換前後用戶的輸入不會被清除掉，這樣是不符合需求的。因此可以通過使用 key 來唯一的標識一個元素，這個情況下，使用 key 的元素不會被覆用。這個時候 key 的作用是用來標識一個獨立的元素。
- 第二種情況是 v-for 中使用 key。用 v-for 更新已渲染過的元素列表時，它預設使用“就地復用”的策略。如果數據項的順序發生了改變，Vue 不會移動 DOM 元素來匹配數據項的順序，而是簡單復用此處的每個元素。因此通過為每個列表項提供一個 key 值，來以便 Vue 跟蹤元素的身份，從而高效的實現復用。這個時候 key 的作用是為了高效的更新渲染虛擬 DOM。
key 是為 Vue 中 vnode 的唯一標記，通過這個 key，diff 操作可以更準確、更快速
- 更準確：因為帶 key 就不是就地復用了，在 sameNode 函數a.key === b.key對比中可以避免就地復用的情況。所以會更加準確。
- 更快速：利用 key 的唯一性生成 map 對象來獲取對應節點，比遍歷方式更快
7. 為什麼不建議用index作為key?
使用index 作為 key和沒寫基本上沒區別，因為不管數組的順序怎麼顛倒，index 都是 0, 1, 2...這樣排列，導致 Vue 會復用錯誤的舊子節點，做很多額外的工作。
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
