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

1. 為什么需要虛擬 DOM

1、高效的視圖更新

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

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

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

3、組件化開發(fā)

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

4、抽象與解耦

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

1.1 舉例說明

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

假設(shè)有一個(gè)動(dòng)態(tài)列表，每個(gè)列表項(xiàng)包含一個(gè)計(jì)數(shù)器。當(dāng)用戶點(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í)際問題：

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

虛擬 DOM 的作用：

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

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

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

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

實(shí)際問題：

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

虛擬 DOM 的作用：

Vue 通過虛擬 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è)嵌套組件樹，某個(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í)際問題：如果不使用虛擬 DOM，任何狀態(tài)的改變都會(huì)導(dǎo)致整個(gè)組件樹重新渲染，即使只有 DeepChild 改變了。

虛擬 DOM 的作用：

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

1.2 虛擬 DOM 的其他好處

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

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

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

虛擬 DOM 提供了一種程序化的視圖描述方式，可以通過代碼動(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)，可以通過 Vue 的渲染器直接渲染到真實(shí) DOM。

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

2.1 核心原理

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

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

2、更新虛擬 DOM 樹

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

3、Diff 算法對(duì)比

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

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

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

2.2 虛擬 DOM 的好處

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

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

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

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

2、開發(fā)效率

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

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

- 組件化開發(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)畫等功能。

2.3 虛擬 DOM 的不足

1、額外的性能開銷

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

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

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

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

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

簡單了解下：

1、Svelte

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

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

優(yōu)勢(shì)：運(yùn)行時(shí)無開銷，性能極高。

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

2、React Native 和 Flutter

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

它們并沒有使用虛擬 DOM，而是采用類似的組件樹 Diff 算法來更新界面。

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

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

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

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

劣勢(shì)：開發(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)頁面或數(shù)據(jù)更新很少的頁面。

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

3. 總結(jié)

Vue 采用虛擬 DOM 是為了提升開發(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)論