一、簡介

虛擬dom是隨著時代發(fā)展而誕生的產(chǎn)物。 命令式操作dom：

• 簡單易用
• 程序中的狀態(tài)很難管理，代碼中的邏輯也很混亂。

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

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

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

三、vnode

VNode類可以實(shí)例化不同類型的vnode實(shí)例，而不同類型的vnode實(shí)例各自表示不同類型的DOM元素。vnode可以理解為節(jié)點(diǎn)描述對象，描述了應(yīng)該怎么創(chuàng)建真實(shí)DOM。

1.vnode的類型

• 注釋節(jié)點(diǎn)：只有兩個有效屬性：isComment屬性和text屬性
• 文本節(jié)點(diǎn)：只有text屬性
• 元素節(jié)點(diǎn)：tag，data（節(jié)點(diǎn)的數(shù)據(jù)：如attrs、class、style等），children，context（當(dāng)前組件的vue實(shí)例）
• 組件節(jié)點(diǎn)：獨(dú)有屬性為componentOptions（組件節(jié)點(diǎn)的選項參數(shù)），componentInstance(組件實(shí)例）
• 函數(shù)式組件：類似于組件節(jié)點(diǎn)，獨(dú)有屬性為functionalContext和functionalOptions
• 克隆節(jié)點(diǎn)：將現(xiàn)有節(jié)點(diǎn)的屬性復(fù)制到新節(jié)點(diǎn)中，與被克隆節(jié)點(diǎn)的唯一區(qū)別是isCloned屬性，克隆節(jié)點(diǎn)的isCloned為true。作用是優(yōu)化靜態(tài)節(jié)點(diǎn)和插槽節(jié)點(diǎn)。

四、虛擬dom的核心——patch

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

1.patch的過程

就是以新的vnode為準(zhǔn)增刪改節(jié)點(diǎn)。

新增節(jié)點(diǎn)

• oldVnode不存在而vnode中存在。通常發(fā)生在首次渲染中。
• vnode和oldVnode完全不是同一個節(jié)點(diǎn)，vnode是新節(jié)點(diǎn)，而oldVnode是被廢棄的節(jié)點(diǎn)。

刪除節(jié)點(diǎn)

• 節(jié)點(diǎn)只在oldVnode中存在。

替換過程是將新創(chuàng)建的DOM節(jié)點(diǎn)插入到舊節(jié)點(diǎn)的旁邊，然后再將舊節(jié)點(diǎn)刪除。

更新節(jié)點(diǎn)

增刪節(jié)點(diǎn)的共同點(diǎn)是兩個虛擬節(jié)點(diǎn)完全不同。新舊節(jié)點(diǎn)是同一個文本節(jié)點(diǎn)，需要進(jìn)行更細(xì)致的比對。

靜態(tài)節(jié)點(diǎn)

靜態(tài)節(jié)點(diǎn)：一旦渲染到頁面上就不會變化。 如果新舊兩個虛擬節(jié)點(diǎn)時靜態(tài)節(jié)點(diǎn)就直接跳過更新節(jié)點(diǎn)。

新虛擬節(jié)點(diǎn)有文本屬性

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

新虛擬節(jié)點(diǎn)無文本屬性

新虛擬節(jié)點(diǎn)有children：

• 舊虛擬節(jié)點(diǎn)也有children屬性，對新舊兩個虛擬節(jié)點(diǎn)的children進(jìn)行更詳細(xì)的對比并更新（增刪改移）。
• 舊虛擬節(jié)點(diǎn)沒有children屬性，說明舊虛擬節(jié)點(diǎn)要么是一個空標(biāo)簽，要么是有文本的文本節(jié)點(diǎn)。如果是文本節(jié)點(diǎn)，先把文本清空讓它變成空標(biāo)簽，然后將新虛擬節(jié)點(diǎn)（vnode）中的children挨個創(chuàng)建成真實(shí)的DOM元素節(jié)點(diǎn)并將其插入到視圖中的DOM節(jié)點(diǎn)下面。

新虛擬節(jié)點(diǎn)無children：

沒有text也沒有children，說明是空節(jié)點(diǎn)。把舊虛擬節(jié)點(diǎn)刪成空標(biāo)簽。

五、更新子節(jié)點(diǎn)的優(yōu)化策略

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

• oldChildren先循環(huán)完畢，如果newChildren中還有剩余的節(jié)點(diǎn)，說明這些節(jié)點(diǎn)都是需要新增的節(jié)點(diǎn)，直接把這些節(jié)點(diǎn)插入到DOM中就行了。
• newChildren先循環(huán)完畢，、如果oldChildren還有剩余的節(jié)點(diǎn)，、說明oldChildren中剩余的節(jié)點(diǎn)都是被廢棄的節(jié)點(diǎn)，是應(yīng)該被刪除的節(jié)點(diǎn)。不需要循環(huán)對比就可以知道需要將這些節(jié)點(diǎn)從DOM中移除。

到此這篇關(guān)于vue中的虛擬dom知識點(diǎn)總結(jié)的文章就介紹到這了,更多相關(guān)vue中的虛擬dom內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論