這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
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 會復用錯誤的舊子節點，做很多額外的作業，
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499374.html
標籤：其他
上一篇：白色卡片陰影效果