vue虛擬DOM和render()函數(shù)詳解

更新時間：2024年12月27日 08:38:58 作者：Mr Robot

這篇文章主要講述了Vue.js中虛擬DOM和render()函數(shù)的使用方法,虛擬DOM是Vue.js的核心概念,它通過JavaScript對象來表示DOM樹,從而提高性能,render()函數(shù)比模板更接近編譯器,適用于需要JavaScript編程能力的場景,通過比較更新前后虛擬DOM結構中的差異

vue虛擬DOM和render()函數(shù)

與其他的前端開發(fā)框架相比，Vue.js的優(yōu)勢是執(zhí)行性能比較高，這里有一個很重要的原因就是Vue.js采用虛擬DOM機制。

雖然大多數(shù)情況下，Vue.js推薦使用模板構建HTML，但是在某些場景下，可能需要JavaScript的編程能力，這時就需要使用render()函數(shù)，它比模板更接近編輯器。

通過本章內(nèi)容的學習，讀者可以了解虛擬DOM和render()函數(shù)的使用方法。

虛擬DOM

DOM即文檔對象模型，它提供了對整個文檔的訪問模型，將文檔作為一個樹形結構，樹的每個結點表示了一個HTML標簽或標簽內(nèi)的文本項。

DOM樹結構精確地描述了HTML文檔中標簽間的相互關聯(lián)性。瀏覽器在解析HTML文檔時，會將文檔中的元素、注釋、文本等標記按照它們的層級關系轉(zhuǎn)化為DOM樹。

一個元素要想在頁面中顯示，則必須在DOM中存在該節(jié)點，也就是必須將該元素節(jié)點添加到現(xiàn)有DOM樹中的某個節(jié)點下，才能渲染到頁面中。同樣地，如果需要刪除某個元素，也需要從DOM樹中刪除該元素對應的節(jié)點。

如果每次要改變頁面展示的內(nèi)容，只能通過遍歷查詢DOM樹，然后修改DOM樹，從而達到更新頁面的目的，這個過程相當消耗資源。

為了解決這個問題，虛擬DOM概念隨著React的誕生而誕生，其由Facebook提出，其卓越的性能很快得到廣大開發(fā)者的認可。因為每次查詢DOM幾乎都需要遍歷整個DOM樹，如果建立一個與DOM樹對應的虛擬DOM對象，也就是JavaScript對象，以對象嵌套的方式來表示DOM樹及其層級結構，那么每次DOM的修改就變成了對JavaScript對象的屬性的操作，由于操作JavaScript對象比操作DOM要快得多，從而大幅度減少性能的開支。

Vue從2.0開始也在其核心引入了虛擬DOM的概念，Vue.js 3.x重寫了虛擬DOM的實現(xiàn)，從而讓性能更加優(yōu)秀。

Vue在更新真實的DOM樹之前，先比較更新前后虛擬DOM結構中有差異的部分，然后采用異步更新隊列的方式將差異部分更新到真實DOM中，從而減少了最終要在真實DOM上執(zhí)行的操作次數(shù)，提高了頁面的渲染效率。

render()函數(shù)

大多數(shù)情況下，Vue通過template來創(chuàng)建HTML。但是在特殊情況下，可能需要JavaScript的編程能力，這時可以使用render()函數(shù)，它比模板更接近編譯器。

下面通過一個簡單的例子，了解render()函數(shù)的優(yōu)勢。假設需要生成一些帶錨點的標題，基礎代碼如下：

<h1>
   <a name="hello-world" href="#hello-world" rel="external nofollow"  rel="external nofollow" >
       Hello world!
   </a>
</h1>

由于錨點標題的使用非常頻繁，考慮到標題的級別包括h1～h6，可以將標題的級別定義成組件的prop，在調(diào)用組件時，可以通過該prop動態(tài)設置標題元素的級別。

代碼如下：

<anchored-heading :level="1">Hello world!</anchored-heading>

接下來就是組件的實現(xiàn)代碼：

const app = createApp({})
app.component(‘a(chǎn)nchored-heading', {
template: `
props: { level: { type: Number, required: true } } })

上述通過模板的方式實現(xiàn)起來不僅冗長，而且為每個級別標題都重復書寫了。

當添加錨元素時，還必須在每個 v-if/v-else-if 分支中再次復制元素。

<div id="app">
        <anchored-heading :level="2">
            <a name="hello-world" href="#hello-world" rel="external nofollow"  rel="external nofollow" >
                相顧無相識，長歌懷采薇。
            </a>
        </anchored-heading>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({})
        app.component('anchored-heading', {
            render() {
                const { h } = Vue
                return h(
                  'h' + this.level, // 標簽名
                  {}, // prop 或 attribute
                  this.$slots.default() // 包含其子節(jié)點的數(shù)組
                )
            },
             props: {
                level: {
                    type: Number,
                    required: true
                }
        })
        app.mount('#app')
    </script>

可見使用render()函數(shù)的實現(xiàn)要精簡得多。

需要注意的是：

向組件中傳遞不帶v-slot指令的子節(jié)點時，比如 anchored-heading 中的 Hello world!，這些子節(jié)點被存儲在組件實例中的$slots.default中。在谷歌瀏覽器中運行程序。