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

1. 為什么需要虛擬 DOM

1、高效的視圖更新

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

2、跨平臺支持

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

3、組件化開發(fā)

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

4、抽象與解耦

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

1.1 舉例說明

場景 1：列表渲染與局部更新

假設(shè)有一個動態(tài)列表，每個列表項包含一個計數(shù)器。當用戶點擊某個計數(shù)器時，值會增加。

<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>

實際問題：

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

虛擬 DOM 的作用：

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

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

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

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

實際問題：

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

虛擬 DOM 的作用：

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

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

假設(shè)有一個嵌套組件樹，某個深層組件的狀態(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>

實際問題：如果不使用虛擬 DOM，任何狀態(tài)的改變都會導致整個組件樹重新渲染，即使只有 DeepChild 改變了。

虛擬 DOM 的作用：

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

1.2 虛擬 DOM 的其他好處

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

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

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

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

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

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

vnode 是一個虛擬 DOM 節(jié)點，可以通過 Vue 的渲染器直接渲染到真實 DOM。

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

2.1 核心原理

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

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

2、更新虛擬 DOM 樹

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

3、Diff 算法對比

新舊虛擬 DOM 樹進行對比，找出變化的最小范圍。

4、Patch 更新真實 DOM

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

2.2 虛擬 DOM 的好處

1、性能優(yōu)勢

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

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

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

2、開發(fā)效率

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

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

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

3、靈活性

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

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

2.3 虛擬 DOM 的不足

1、額外的性能開銷

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

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

2、Diff 算法的復雜度

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

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

簡單了解下：

1、Svelte

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

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

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

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

2、React Native 和 Flutter

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

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

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

3、直接操作真實 DOM

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

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

劣勢：開發(fā)復雜性高，需要實現(xiàn)額外的事件機制。

2.5 虛擬 DOM 是否總是必要的

1、適合的場景

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

需要動態(tài)生成大量 DOM 節(jié)點的場景。

2、不適合的場景

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

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

3. 總結(jié)

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

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

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

最新評論