快捷導(dǎo)航

Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過程詳解

更新時間：2024年09月10日 08:24:55 作者：zykk

Vue.js?在其運(yùn)行過程中會將模板編譯成虛擬?DOM?(VNode),然后再將?VNode?渲染成實(shí)際的?DOM?節(jié)點(diǎn),這個過程是由?Vue?內(nèi)部的編譯器和渲染系統(tǒng)完成的,本文給大家介紹了Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過程,需要的朋友可以參考下

前言

Vue.js 在其運(yùn)行過程中會將模板編譯成虛擬 DOM (VNode)，然后再將 VNode 渲染成實(shí)際的 DOM 節(jié)點(diǎn)。這個過程是由 Vue 內(nèi)部的編譯器和渲染系統(tǒng)完成的.

雖然Vue 3 的虛擬 DOM 編譯過程對于開發(fā)者來說通常是透明的，但了解這些內(nèi)部機(jī)制有助于更好地理解和優(yōu)化應(yīng)用程序。

如果你對 Vue 3 的內(nèi)部實(shí)現(xiàn)感興趣，可以查閱 Vue 3 的官方文檔或閱讀 Vue 3 的源碼來深入了解這一過程。

Vue 3 中虛擬 DOM 的編譯過程

1. 模板編譯

在 Vue 3 中，模板編譯主要由兩個階段組成：解析和優(yōu)化。

解析階段：Vue 3 的編譯器會將模板字符串解析成一個抽象語法樹 (Abstract Syntax Tree, AST)，這個樹結(jié)構(gòu)表示了模板的結(jié)構(gòu)和內(nèi)容。編譯器會識別出模板中的各種指令（如 v-if, v-for, v-bind 等）并將它們轉(zhuǎn)換成對應(yīng)的 AST 節(jié)點(diǎn)。
優(yōu)化階段：編譯器會對 AST 進(jìn)行優(yōu)化，以減少不必要的計算和 DOM 操作。例如，它可以提前計算靜態(tài)節(jié)點(diǎn)，并將其標(biāo)記為靜態(tài)的，這樣在渲染時就不需要重新生成這些節(jié)點(diǎn)。

2. 生成渲染函數(shù)

一旦 AST 被創(chuàng)建并優(yōu)化后，編譯器會生成一個渲染函數(shù)，這個函數(shù)可以用來創(chuàng)建虛擬 DOM 節(jié)點(diǎn)（VNode）。渲染函數(shù)通常會利用 Vue 內(nèi)置的 h 函數(shù)（createVNode 的別名）來創(chuàng)建 VNode。

3. 創(chuàng)建虛擬 DOM (VNode)

在 Vue 3 中，h 函數(shù)被用來創(chuàng)建 VNode。一個 VNode 是一個 JavaScript 對象，它包含了關(guān)于 DOM 節(jié)點(diǎn)的信息，如標(biāo)簽名、屬性、子節(jié)點(diǎn)等。例如：

const vnode = h(
  'div', // 標(biāo)簽名
  { id: 'app' }, // 屬性對象
  'Hello Vue 3!' // 子節(jié)點(diǎn)
);

4. 渲染到真實(shí) DOM

當(dāng) VNode 被創(chuàng)建后，Vue 會使用高效的算法來比較新舊 VNode，并更新真實(shí)的 DOM。這個過程稱為 patching。Vue 3 的 diff 算法旨在最小化 DOM 操作，從而提高性能。

今天來簡單介紹一下如何將一份虛擬dom轉(zhuǎn)成真實(shí)dom。

vdomToDom

虛擬dom結(jié)構(gòu)已有，掛載到root節(jié)點(diǎn)上，請問如何實(shí)現(xiàn)render函數(shù)？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>


    <script>
        const vnode = {
            tag: 'div',
            attrs: {
                id: 'app',
                class:'box'
            },
            children: [
                {
                    tag: 'span',
                    children: [{
                        tag: 'a',
                        children: [],
                    }],
                },
                {
                    tag: 'span',
                    children: [{
                        tag: 'a',
                        children: [],
                    }]
                }
            ]
        }


        render(vnode,document.getElementById('root'))

        function render(vnode, container) {
            
        }
    </script>
</body>

</html>

我們先來看一眼這份虛擬dom長什么樣。

首先最外層有個id為app類名為box的div，里面有兩個子節(jié)點(diǎn)span，第一個子節(jié)點(diǎn)中又有一個a，第二個子節(jié)點(diǎn)中也有一個a

那么vue中編譯dom的原理是什么，我們來一份簡易版看看。

首先我們就想有一個方法只要給一個虛擬dom就能生成dom，然后將其掛載到root上去，接下來就是如何實(shí)現(xiàn)createDom

function render(vnode, container) {
            const newDom = createDom(vnode)
            container.appendChild(newDom)
        }

function createDom(vnode) {
            const { tag, attrs, children } = vnode
            const dom = document.createElement(tag)
            if (typeof attrs === 'object' && attrs !== null) {
                updateProps(dom, {}, attrs) // 為dom添加屬性
            }
            if (children.length > 0) {
                reconcileChildren(children, dom) // 為dom添加子容器
            }
            return dom
        }

然后思考，如何為子容器添加屬性以及如何為容器添加子容器？

function updateProps(dom, oldProps = {}, newProps = {}) {
            for (const key in newProps) {
                if (key === 'style') {
                    let styleObj = newProps[key]
                    for (let attr in styleObj) {
                        dom.style[attr] = styleObj[attr]
                    }
                } else { // id / class
                    dom[key] = newProps[key]
                }
            }
        }

        function reconcileChildren(children, dom) {
            for (let child of children) {
                render(child, dom)
            }
        }

完整代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>


    <script>
        const vnode = {
            tag: 'div',
            attrs: {
                id: 'app',
                className: 'box'
            },
            children: [
                {
                    tag: 'span',
                    children: [{
                        tag: 'a',
                        children: [],
                    }],
                },
                {
                    tag: 'span',
                    children: [{
                        tag: 'a',
                        children: [],
                    }]
                }
            ]
        }


        render(vnode, document.getElementById('root'))

        function render(vnode, container) {
            const newDom = createDom(vnode)
            container.appendChild(newDom)
        }

        function createDom(vnode) {
            const { tag, attrs, children } = vnode
            const dom = document.createElement(tag)
            if (typeof attrs === 'object' && attrs !== null) {
                updateProps(dom, {}, attrs) // 為dom添加屬性
            }
            if (children.length > 0) {
                reconcileChildren(children, dom) // 為dom添加子容器
            }
            return dom
        }
        function updateProps(dom, oldProps = {}, newProps = {}) {
            for (const key in newProps) {
                if (key === 'style') {
                    let styleObj = newProps[key]
                    for (let attr in styleObj) {
                        dom.style[attr] = styleObj[attr]
                    }
                } else { // id / class
                    dom[key] = newProps[key]
                }
            }
        }

        function reconcileChildren(children, dom) {
            for (let child of children) {
                render(child, dom)
            }
        }
    </script>
</body>

</html>