vue中的虛擬dom知識點有哪些

本文小編為大家詳細介紹“vue中的虛擬dom知識點有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue中的虛擬dom知識點有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、簡介

虛擬dom是隨著時代發展而誕生的產物。 命令式操作dom：

• 簡單易用

• 程序中的狀態很難管理，代碼中的邏輯也很混亂。

現在三大主流框架都是聲明式操作DOM。通過描述狀態和DOM之間的映射關系，就可以將狀態渲染成視圖。狀態可以是JS 中的任意類型。將狀態作為輸入，并生成DOM輸出到頁面上顯示出來的過程叫渲染。 通常程序在運行時，狀態會不斷發生變化。狀態發生變化時，就需要重新渲染。 如何確定狀態中發生了什么變化以及需要在哪里更新DOM？ 最簡單粗暴的解決方式：把所有DOM全刪了，使用狀態重新生成一份DOM，輸出到頁面上顯示出來。但是訪問dom是非常昂貴的，這樣會造成相當多的性能浪費。
虛擬DOM的解決方式：通過狀態生成虛擬節點樹，然后使用虛擬節點樹進行渲染。在渲染之前，會對比新舊虛擬DOM，只渲染不同的部分。 虛擬DOM是將狀態映射為視圖的眾多解決方案中的一種。

二、為什么VUE引入了虛擬DOM？

vue在一定程度上知道具體哪個狀態發生了變化和哪些節點使用了這個狀態，這樣就可以通過更細粒度的綁定來更新視圖。代價是粒度太細會有很多watcher同時觀察某些狀態，會有一些內存開銷以及一些依賴追蹤的開銷。vue2.0采取了一個中等粒度的解決方案，狀態偵測只細化到某個組件，組件內部通過虛擬DOM渲染視圖，這可以大大縮減依賴數量和watcher數量。 vue通過模板描述狀態和視圖之間的映射關系，它會先將模板編譯成渲染函數，然后執行渲染函數生成虛擬節點，使用虛擬節點更新視圖。
虛擬DOM在vue中的作用：
提供虛擬節點和對比新舊vnode，并根據對比結果進行DOM操作來更新視圖。

三、vnode

VNode類可以實例化不同類型的vnode實例，而不同類型的vnode實例各自表示不同類型的DOM元素。vnode可以理解為節點描述對象，描述了應該怎么創建真實DOM。

1.vnode的類型

• 注釋節點：只有兩個有效屬性：isComment屬性和text屬性

• 文本節點：只有text屬性

• 元素節點：tag，data（節點的數據：如attrs、class、style等），children，context（當前組件的vue實例）

• 組件節點：獨有屬性為componentOptions（組件節點的選項參數），componentInstance(組件實例）

• 函數式組件：類似于組件節點，獨有屬性為functionalContext和functionalOptions

• 克隆節點：將現有節點的屬性復制到新節點中，與被克隆節點的唯一區別是isCloned屬性，克隆節點的isCloned為true。作用是優化靜態節點和插槽節點。

四、虛擬dom的核心——patch

可以將vnode渲染成真實的DOM，實際作用是計算出真正需要更新的節點，在現有DOM上進行修改來實現更新視圖的目的，最大限度減少DOM操作，顯著提升性能。本質是用js的運算成本替換DOM操作的執行成本，js的運算速度比DOM快得多，所以很劃算。

1.patch的過程

就是以新的vnode為準增刪改節點。

新增節點

• oldVnode不存在而vnode中存在。通常發生在首次渲染中。

• vnode和oldVnode完全不是同一個節點，vnode是新節點，而oldVnode是被廢棄的節點。

刪除節點

• 節點只在oldVnode中存在。

替換過程是將新創建的DOM節點插入到舊節點的旁邊，然后再將舊節點刪除。

更新節點

增刪節點的共同點是兩個虛擬節點完全不同。新舊節點是同一個文本節點，需要進行更細致的比對。

靜態節點

靜態節點：一旦渲染到頁面上就不會變化。 如果新舊兩個虛擬節點時靜態節點就直接跳過更新節點。

新虛擬節點有文本屬性

新虛擬節點有文本屬性而且和舊節點文本屬性不一樣，就直接調用setTextContent方法（在瀏覽器環境下是node.textContent方法）來將視圖中DOM節點的內容改為虛擬節點的text屬性所保存的文本。

新虛擬節點無文本屬性

新虛擬節點有children：

• 舊虛擬節點也有children屬性，對新舊兩個虛擬節點的children進行更詳細的對比并更新（增刪改移）。

• 舊虛擬節點沒有children屬性，說明舊虛擬節點要么是一個空標簽，要么是有文本的文本節點。如果是文本節點，先把文本清空讓它變成空標簽，然后將新虛擬節點（vnode）中的children挨個創建成真實的DOM元素節點并將其插入到視圖中的DOM節點下面。

新虛擬節點無children：

沒有text也沒有children，說明是空節點。把舊虛擬節點刪成空標簽。

五、更新子節點的優化策略

雙端對比。 只需要嘗試使用相同位置的兩個節點來比對是否是同一個節點：如果恰巧是同一個節點，直接就可以進入更新節點的操作；如果嘗試失敗了，再用循環的方式來查找節點。這樣做可以很大程度地避免循環oldChildren來查找節點，從而使執行速度得到很大的提升。

• oldChildren先循環完畢，如果newChildren中還有剩余的節點，說明這些節點都是需要新增的節點，直接把這些節點插入到DOM中就行了。

• newChildren先循環完畢，、如果oldChildren還有剩余的節點，、說明oldChildren中剩余的節點都是被廢棄的節點，是應該被刪除的節點。不需要循環對比就可以知道需要將這些節點從DOM中移除。

讀到這里，這篇“vue中的虛擬dom知識點有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。