腳本之家服務器常用軟件

快捷導航

Javascript 虛擬 DOM詳解

更新時間：2021年12月09日 14:33:04 作者：ZhangLiangXWZ

這篇文章主要為大家介紹了Javascript 虛擬 DOM，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

什么是虛擬 dom？

虛擬 dom 本質上就是一個普通的JS對象（mounted 中打印 this. _vnode 就是該對象內容），用于描述視圖的界面結構

在vue中，每個組件都有一個render函數，每個render函數都會返回一個虛擬dom樹，這也就意味著每個組件都對應一棵虛擬DOM樹

在這里插入圖片描述

vnode 是一個普通的 JS 對象，用于描述界面上應該有什么，比如：

var vnode = {
  tag: "h1",
  children: [
    { tag: undefined, text: "第一個vue應用：Hello World"}
  ]
}

上面的對象描述了：

有一個標簽名為 h1 的節(jié)點，它有一個子節(jié)點，該子節(jié)點是一個文本，內容為「第一個vue應用：Hello World」

為什么需要虛擬dom？

在vue中，渲染視圖會調用render函數，這種渲染不僅發(fā)生在組件創(chuàng)建時，同時發(fā)生在視圖依賴的數據更新時。如果在渲染時，直接使用真實DOM，由于真實DOM的創(chuàng)建、更新、插入等操作會帶來大量的性能損耗，從而就會極大的降低渲染效率。

因此，vue在渲染時，使用虛擬dom來替代真實dom，主要為解決渲染效率的問題。

對比創(chuàng)建js對象和真實 dom 對象效率：

在這里插入圖片描述

結果：

在這里插入圖片描述

創(chuàng)建一個真實的 dom 會伴隨著創(chuàng)建許多的屬性

在這里插入圖片描述

虛擬dom是如何轉換為真實dom的？

在一個組件實例首次被渲染時，它先生成虛擬dom樹，然后根據虛擬dom樹創(chuàng)建真實dom，并把真實dom掛載到頁面中合適的位置，此時，每個虛擬dom便會對應一個真實的dom。如果頁面只會刷新一次，后續(xù)不會有數據更新等問題的情況下，用虛擬 dom 的方式是比直接顯示真實 dom 效率低的。

如果一個組件受響應式數據變化的影響，需要重新渲染時，它仍然會重新調用render函數，創(chuàng)建出一個新的虛擬dom樹，用新樹和舊樹對比，通過對比，找出差異，然后僅更新差異部分的虛擬dom節(jié)點，最后，這些更新過的虛擬節(jié)點，會去修改它們對應的真實dom

這樣一來，就保證了對真實dom達到最小的改動。

在這里插入圖片描述

模板和虛擬dom的關系

vue框架中有一個compile（編譯）模塊，它主要負責將模板轉換為render函數，而render函數調用后將得到虛擬dom。

編譯的過程分兩步：

1.將模板字符串轉換成為AST（抽象語法樹：用js樹形結構來描述我們原始的代碼；在線工具：https://astexplorer.net/）

2.將AST轉換為render函數

vue 模板并不是真實的 DOM，它會被編譯為虛擬 DOM

<div id="app">
  <h1>第一個vue應用：{{title}}</h1>
  <p>作者：{{author}}</p>
</div>

上面的模板會被編譯為類似下面結構的虛擬 DOM

{
  tag: "div",
  children: [
    { tag: "h1", children: [ { text: "第一個vue應用：Hello World" } ] },
    { tag: "p", children: [ { text: "作者：袁" } ] }
  ]
}

如果使用傳統的引入方式（script src="...vue.js"），則編譯時間發(fā)生在組件第一次加載時，這稱之為運行時編譯。

如果是在vue-cli的默認配置下，編譯發(fā)生在打包時(npm run build)，打包之后就沒有模板只有 render 函數了，這稱之為模板預編譯。

編譯是一個極其耗費性能的操作，預編譯可以有效的提高運行時的性能，而且，由于運行的時候已不需要編譯，vue-cli在打包時會排除掉vue中的compile模塊，以減少打包體積

打包時是否需要包含?compile?模塊，是通過?vue.config.js?中的?runtimeCompiler: true?來控制的，默認 false，不包含。不建議更改該配置

模板的存在，僅僅是為了讓開發(fā)人員更加方便的書寫界面代碼

vue最終運行的時候，最終需要的是render函數，而不是模板，因此，模板中的各種語法，在虛擬dom中都是不存在的，它們都會變成虛擬dom的配置

在?vue-cli?中如果同時存在?template?和?render, 由于存在一個打包過程，其中的模板預編譯會生成?render?覆蓋原有的?render?函數

在 vue 中如果同時存在?template?和?render，一定是以?render?為準

虛擬 DOM 樹會最終生成為真實的 DOM 樹

在這里插入圖片描述

vue通過以下邏輯生成vnode tree：

在這里插入圖片描述

注意：虛擬節(jié)點樹必須是單根的

注入

在這里插入圖片描述

vue會將以下配置注入到vue實例：

data：和界面相關的數據
computed：通過已有數據計算得來的數據，將來詳細講解
methods：方法

模板中可以使用vue實例中的成員

為了防止名稱沖突。因為會將data中數據代理給vue，假如說我們自己寫的data名稱和vue中自帶的屬性沖突了，那么就會覆蓋vue內部的屬性，所以vue會把自己內部的屬性成員名稱前加上或，如果加上的是或_，如果加上的是或，?如果加上的是，代表是我們可以使用的，如果加上的是_，是vue自己內部使用的方法或屬性，我們不需要調用