vue中對(duì)虛擬dom的理解知識(shí)點(diǎn)總結(jié)

更新時(shí)間：2021年06月20日 16:06:15 作者：當(dāng)當(dāng)和瓶瓶

在本篇文章里小編給大家整理了一篇關(guān)于vue中對(duì)虛擬dom的理解知識(shí)點(diǎn)總結(jié)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)參考下。

本質(zhì)是一個(gè)普通的js對(duì)象，用于描述視圖界面結(jié)構(gòu)的，

在mouted的回調(diào)中，可以輸出_vnode，

通過圖可以知道，_vnode中有以下幾個(gè)主要的屬性：

tag：組件的標(biāo)簽名，
data: 組件的屬性，
children: 組件的子標(biāo)簽
parent: 父級(jí)元素

render函數(shù)：

作用：創(chuàng)建虛擬dom，

每個(gè)組件都有虛擬dom，并且虛擬dom都是由render函數(shù)創(chuàng)建的；

使用虛擬dom樹的目的：提高渲染效率

在vue中，當(dāng)渲染視圖時(shí)候會(huì)調(diào)用render函數(shù)。這種渲染不僅發(fā)生在組件創(chuàng)建時(shí)候，還會(huì)發(fā)生在視圖所依賴的數(shù)據(jù)更新時(shí)；

由于真實(shí)dom的創(chuàng)建、更新。插入等操作帶來大量的性能消耗，從而降低渲染效率，所以使用虛擬dom樹來代替真實(shí)dom。

虛擬dom如何轉(zhuǎn)換成真實(shí)dom

組件實(shí)例首次渲染：生成虛擬dom樹，根據(jù)虛擬dom樹創(chuàng)建真實(shí)dom，并把真實(shí)dom掛載到頁面合適位置，此時(shí)每個(gè)虛擬dom對(duì)應(yīng)一個(gè)真實(shí)dom；

備注：在虛擬dom中，都由elm屬性，就是真實(shí)dom，也就是說，生成的虛擬dom同時(shí)，都創(chuàng)出了真實(shí)dom，也就是說，第一次的渲染，vue比單純創(chuàng)建dom元素要效率低，vue的高效體現(xiàn)在響應(yīng)式數(shù)據(jù)變化的虛擬dom對(duì)比

組件依賴的數(shù)據(jù)收到響應(yīng)式數(shù)據(jù)的影響時(shí)：重新調(diào)用render函數(shù)創(chuàng)建虛擬dom樹，用新舊虛擬dom樹比較，vue會(huì)找到最小更新量，然后更新必要的虛擬dom節(jié)點(diǎn)，最后修改對(duì)應(yīng)的真實(shí)dom。這樣就保證了對(duì)真實(shí)dom達(dá)到最小的變動(dòng)。

真實(shí)dom的屬性的數(shù)量要遠(yuǎn)遠(yuǎn)大于虛擬dom屬性，并且任意的對(duì)真實(shí)dom的添加刪除都會(huì)導(dǎo)致重排重繪問題。這非常消耗性能。

備注：真實(shí)dom和普通對(duì)象創(chuàng)建的耗時(shí)比較

可以看出，dom對(duì)象創(chuàng)建是普通對(duì)象耗時(shí)20多倍。

模板和虛擬dom的關(guān)系

vue框架中有一個(gè)compile模板，它主要負(fù)責(zé)將模板轉(zhuǎn)換成為render函數(shù)，而render函數(shù)調(diào)用后將得到虛擬dom

編譯過程分為兩步

1.將模板字符串轉(zhuǎn)換成為AST（抽象語法樹，用js樹形結(jié)構(gòu)描述原始代碼,下圖通過AST在線轉(zhuǎn)換可以看出結(jié)構(gòu)。

2.將AST轉(zhuǎn)換成為render函數(shù)

運(yùn)行時(shí)編譯和模板預(yù)編譯

當(dāng)采用傳統(tǒng)引入方式，則編譯發(fā)生的時(shí)間為組件第一次加載時(shí)，成為運(yùn)行時(shí)編譯

如果在vue-cli的默認(rèn)情況下，編譯發(fā)生在打包時(shí)（npm run build / serve），成為模板預(yù)編譯。

編譯是一個(gè)極其消耗性能的操作，預(yù)編譯可以有效提高運(yùn)行時(shí)的性能，而且由于運(yùn)行的時(shí)候已經(jīng)不需要編譯，vue-cli在打包時(shí)會(huì)排除掉vue中的compile模塊，以減少打包體積。模板的存在，僅僅是為了讓開發(fā)人員更方便的寫代碼。

知識(shí)點(diǎn)擴(kuò)展：

虛擬 dom 的作用

現(xiàn)在主流的框架都是聲明式操作 dom 的框架。我們只需要描述狀態(tài)與 dom 之間的映射關(guān)系即可，狀態(tài)到視圖（真實(shí)的 dom）的轉(zhuǎn)換，框架會(huì)幫我們做。

最粗暴的做法是將狀態(tài)渲染成視圖，每次更新狀態(tài)，都重新更新整個(gè)視圖。

這種做法的性能可想而知。比較好的想法是：狀態(tài)改變，只更新與狀態(tài)相關(guān)的 dom 節(jié)點(diǎn)。虛擬 dom 只是實(shí)現(xiàn)這個(gè)想法的其中一種方法而已。

具體做法：

狀態(tài) -> 真實(shí) dom（最初）

狀態(tài) -> 虛擬 dom -> 真實(shí) dom（使用虛擬 dom）

狀態(tài)改變，重新生成一份虛擬 dom，將上一份和這一份虛擬 dom 進(jìn)行對(duì)比，找出需要更新的部分，更新真實(shí) dom。

vue 中的虛擬 dom

真實(shí)的 dom 是由節(jié)點(diǎn)（Node）組成，虛擬 dom 則是由虛擬節(jié)點(diǎn)（vNode）組成。

虛擬 dom 在 vue 中主要做兩件事：

提供與真實(shí)節(jié)點(diǎn)（Node）對(duì)應(yīng)的虛擬節(jié)點(diǎn)（vNode）

將新的虛擬節(jié)點(diǎn)與舊的虛擬節(jié)點(diǎn)進(jìn)行對(duì)比，找出需要差異，然后更新視圖

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

您可能感興趣的文章: