Vue 使用虛擬 DOM 的初衷不僅是為了性能優(yōu)化，更重要的是為了解決開(kāi)發(fā)效率和靈活性的問(wèn)題，同時(shí)保持視圖更新的可控性和一致性。

1. 為什么需要虛擬 DOM

1、高效的視圖更新

在復(fù)雜場(chǎng)景中，直接操作真實(shí) DOM 會(huì)引發(fā)性能問(wèn)題。虛擬 DOM 提供了一個(gè)中間層，通過(guò) Diff 算法比較前后狀態(tài)，僅更新需要修改的部分，避免了不必要的 DOM 操作。

2、跨平臺(tái)支持

虛擬 DOM 是與運(yùn)行環(huán)境無(wú)關(guān)的描述方式，Vue 的核心邏輯可以適配不同的平臺(tái)，比如瀏覽器、服務(wù)器渲染（SSR）或原生應(yīng)用。

3、組件化開(kāi)發(fā)

虛擬 DOM 使得組件可以獨(dú)立維護(hù)自己的狀態(tài)和渲染邏輯，而無(wú)需直接操作真實(shí) DOM。組件更新時(shí)，虛擬 DOM 只更新組件內(nèi)部的變動(dòng)部分，提升了開(kāi)發(fā)體驗(yàn)和維護(hù)性。

4、抽象與解耦

虛擬 DOM 將框架的渲染邏輯與底層 DOM 操作解耦，使 Vue 的核心邏輯更加簡(jiǎn)潔并易于擴(kuò)展。

1.1 舉例說(shuō)明

場(chǎng)景 1：列表渲染與局部更新

假設(shè)有一個(gè)動(dòng)態(tài)列表，每個(gè)列表項(xiàng)包含一個(gè)計(jì)數(shù)器。當(dāng)用戶(hù)點(diǎn)擊某個(gè)計(jì)數(shù)器時(shí)，值會(huì)增加。

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <span>{{ item }}</span>
      <button @click="increment(index)">+</button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [0, 0, 0],
    };
  },
  methods: {
    increment(index) {
      this.list[index]++;
    },
  },
};
</script>

實(shí)際問(wèn)題：

如果不使用虛擬 DOM，每次 list 數(shù)據(jù)改變時(shí)，整個(gè)列表都需要重新渲染。當(dāng)列表非常大時(shí)（例如 1000 項(xiàng)），重新渲染所有項(xiàng)會(huì)造成性能問(wèn)題。

虛擬 DOM 的作用：

Vue 會(huì)比較 list 的前后狀態(tài)，發(fā)現(xiàn)只有某個(gè) index 的數(shù)據(jù)發(fā)生了變化。Vue 通過(guò) Diff 算法，只更新該項(xiàng)的 DOM 節(jié)點(diǎn)，其余部分保持不變。

場(chǎng)景 2：條件渲染和動(dòng)態(tài)內(nèi)容更新

假設(shè)有一個(gè)輸入框，用戶(hù)輸入的內(nèi)容會(huì)動(dòng)態(tài)渲染在頁(yè)面中。

<template>
  <div>
    <input v-model="message" placeholder="輸入文字" />
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>

實(shí)際問(wèn)題：

用戶(hù)每次輸入都會(huì)觸發(fā) message 的變化。如果直接操作真實(shí) DOM，需要不斷銷(xiāo)毀和重建 <p> 節(jié)點(diǎn)，非常低效。

虛擬 DOM 的作用：

Vue 通過(guò)虛擬 DOM 描述 <p> 節(jié)點(diǎn)內(nèi)容，并比較前后狀態(tài)。當(dāng) message 變化時(shí)，只更新 <p> 節(jié)點(diǎn)的文本內(nèi)容，避免其他 DOM 節(jié)點(diǎn)的操作。

場(chǎng)景 3：復(fù)雜嵌套結(jié)構(gòu)的高效更新

假設(shè)有一個(gè)嵌套組件樹(shù)，某個(gè)深層組件的狀態(tài)發(fā)生變化。

<template>
  <div>
    <Parent>
      <Child>
        <DeepChild :value="deepValue" />
      </Child>
    </Parent>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      deepValue: 0,
    };
  },
  methods: {
    updateValue() {
      this.deepValue++;
    },
  },
};
</script>

實(shí)際問(wèn)題：如果不使用虛擬 DOM，任何狀態(tài)的改變都會(huì)導(dǎo)致整個(gè)組件樹(shù)重新渲染，即使只有 DeepChild 改變了。

虛擬 DOM 的作用：

Vue 只會(huì)更新 DeepChild 的虛擬 DOM 并將變更同步到真實(shí) DOM。Parent 和 Child 的 DOM 節(jié)點(diǎn)完全不受影響，提升了性能。

1.2 虛擬 DOM 的其他好處

1、服務(wù)器渲染支持

在 SSR中，Vue 使用虛擬 DOM 將組件樹(shù)轉(zhuǎn)換為 HTML 字符串并發(fā)送給客戶(hù)端?？蛻?hù)端接收到 HTML 后，可以通過(guò)虛擬 DOM 進(jìn)行靜態(tài)內(nèi)容的激活，不需要重新生成 DOM 節(jié)點(diǎn)。

2、動(dòng)態(tài)編程能力

虛擬 DOM 提供了一種程序化的視圖描述方式，可以通過(guò)代碼動(dòng)態(tài)生成或修改 UI。

示例：手動(dòng)創(chuàng)建虛擬 DOM

import { h } from 'vue';
 
const vnode = h('div', { id: 'app' }, [
  h('p', {}, '動(dòng)態(tài)生成的段落'),
]);

vnode 是一個(gè)虛擬 DOM 節(jié)點(diǎn)，可以通過(guò) Vue 的渲染器直接渲染到真實(shí) DOM。

2. 虛擬 DOM 的作用與核心原理

2.1 核心原理

1、創(chuàng)建虛擬 DOM 樹(shù)

Vue 在組件渲染時(shí)，會(huì)將模板編譯成虛擬 DOM 樹(shù)的形式。虛擬 DOM 本質(zhì)是一個(gè) JavaScript 對(duì)象，表示真實(shí) DOM 的結(jié)構(gòu)和狀態(tài)。

2、更新虛擬 DOM 樹(shù)

當(dāng)狀態(tài)發(fā)生變化時(shí)，Vue 會(huì)重新生成一棵新的虛擬 DOM 樹(shù)。

3、Diff 算法對(duì)比

新舊虛擬 DOM 樹(shù)進(jìn)行對(duì)比，找出變化的最小范圍。

4、Patch 更新真實(shí) DOM

根據(jù) Diff 結(jié)果，對(duì)真實(shí) DOM 進(jìn)行最小化更新。

2.2 虛擬 DOM 的好處

1、性能優(yōu)勢(shì)

- 最小化更新：通過(guò) Diff 算法找出需要更新的部分，避免不必要的 DOM 重排和重繪。

- 批量操作：將多個(gè) DOM 操作合并為一次更新（如 requestAnimationFrame 或異步批處理）。

- 跨平臺(tái)能力：可以在不同的運(yùn)行環(huán)境中統(tǒng)一使用（如瀏覽器、服務(wù)端、Native）。

2、開(kāi)發(fā)效率

- 數(shù)據(jù)驅(qū)動(dòng)：開(kāi)發(fā)者不需要手動(dòng)操作 DOM，只需專(zhuān)注于數(shù)據(jù)的變化。

- 聲明式編程：通過(guò)模板語(yǔ)法定義視圖，邏輯更清晰、代碼更易維護(hù)。

- 組件化開(kāi)發(fā)：虛擬 DOM 與 Vue 的組件系統(tǒng)結(jié)合，使得組件可以復(fù)用和嵌套。

3、靈活性

- 動(dòng)態(tài)渲染：虛擬 DOM 可以高效處理動(dòng)態(tài)生成的結(jié)構(gòu)和內(nèi)容。

- 插件擴(kuò)展：基于虛擬 DOM，可以輕松實(shí)現(xiàn)自定義指令、動(dòng)畫(huà)等功能。

2.3 虛擬 DOM 的不足

1、額外的性能開(kāi)銷(xiāo)

- 創(chuàng)建和更新虛擬 DOM 樹(shù)需要額外的內(nèi)存和計(jì)算資源。

- 對(duì)于非常簡(jiǎn)單的場(chǎng)景（如純靜態(tài)頁(yè)面），直接操作 DOM 或模板渲染可能更高效。

2、Diff 算法的復(fù)雜度

雖然 Diff 算法已經(jīng)很高效，但在復(fù)雜場(chǎng)景下，仍然可能成為性能瓶頸（如頻繁更新的大量節(jié)點(diǎn)）。

2.4 為什么其他框架不使用虛擬 DOM

簡(jiǎn)單了解下：

1、Svelte

Svelte 的核心是編譯時(shí)優(yōu)化。

在編譯階段將模板編譯為高效的原生 DOM 操作代碼，完全繞過(guò)虛擬 DOM。

優(yōu)勢(shì)：運(yùn)行時(shí)無(wú)開(kāi)銷(xiāo)，性能極高。

劣勢(shì)：靈活性較低，動(dòng)態(tài)生成的結(jié)構(gòu)需要額外處理。

2、React Native 和 Flutter

這些框架通過(guò)直接將組件映射到 Native UI，避免了瀏覽器中的真實(shí) DOM 操作。

它們并沒(méi)有使用虛擬 DOM，而是采用類(lèi)似的組件樹(shù) Diff 算法來(lái)更新界面。

優(yōu)勢(shì)：性能更接近原生應(yīng)用。

3、直接操作真實(shí) DOM

對(duì)于一些特殊場(chǎng)景（如游戲、圖形密集型應(yīng)用），可以使用 Canvas 繪制界面，完全繞過(guò) DOM。

優(yōu)勢(shì)：性能極高。

劣勢(shì)：開(kāi)發(fā)復(fù)雜性高，需要實(shí)現(xiàn)額外的事件機(jī)制。

2.5 虛擬 DOM 是否總是必要的

1、適合的場(chǎng)景

數(shù)據(jù)復(fù)雜且變化頻繁的應(yīng)用（如管理系統(tǒng)、實(shí)時(shí)監(jiān)控系統(tǒng)）。

需要?jiǎng)討B(tài)生成大量 DOM 節(jié)點(diǎn)的場(chǎng)景。

2、不適合的場(chǎng)景

靜態(tài)頁(yè)面或數(shù)據(jù)更新很少的頁(yè)面。

游戲或圖形密集型應(yīng)用（使用 Canvas/WebGL 更高效）。

3. 總結(jié)

Vue 采用虛擬 DOM 是為了提升開(kāi)發(fā)效率、提供跨平臺(tái)支持，同時(shí)保持較高的性能。

虛擬 DOM 并非最優(yōu)解，但在大部分 Web 應(yīng)用中，它是性能和靈活性的平衡點(diǎn)。

到此這篇關(guān)于淺析為什么Vue使用虛擬DOM的文章就介紹到這了,更多相關(guān)Vue使用虛擬DOM內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論