在 Vue 中，虚拟 DOM（Virtual DOM）是实现高效页面更新的核心技术之一。Vue 通过虚拟 DOM 来优化渲染性能，减少对真实 DOM 的直接操作。以下是 Vue 如何利用虚拟 DOM 实现页面更新的详细流程：

一、Vue 中虚拟 DOM 的核心流程

1、模板编译为渲染函数

Vue 的模板会被编译为渲染函数（render function），渲染函数返回一个虚拟 DOM 树（VNode 树）。
例如：

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

编译后的渲染函数：

function render() {
  return h("div", { id: "app" }, [h("p", this.message)]);
}

2、生成虚拟 DOM 树

渲染函数执行后，会生成一个虚拟 DOM 树（VNode 树）。VNode 是 Vue 对虚拟 DOM 节点的抽象表示，包含标签名、属性、子节点等信息。
例如：

{
  tag: 'div',
  props: { id: 'app' },
  children: [
    { tag: 'p', props: {}, children: ['Hello Vue'] }
  ]
}

3、初始渲染

首次渲染时，Vue 会将虚拟 DOM 树转换为真实 DOM 并插入页面：

const vnode = render(); // 生成虚拟 DOM 树
const dom = createElement(vnode); // 将虚拟 DOM 转换为真实 DOM
document.body.appendChild(dom); // 插入页面

4、数据变化触发更新

当组件的状态（如 data、props）发生变化时，Vue 会重新执行渲染函数，生成新的虚拟 DOM 树。

5、Diff 算法对比新旧虚拟 DOM

Vue 使用 Diff 算法对比新旧虚拟 DOM 树，找出需要更新的部分。Diff 算法的核心策略包括：

• 同层比较：仅对比同一层级的节点，避免跨层级遍历。
• Key 优化：为列表项添加唯一 key，帮助算法识别节点移动或复用。
• 差异类型标记：记录节点的替换、属性修改、文本修改、子节点顺序调整等差异。

6、Patch 阶段（更新真实 DOM）

根据 Diff 结果生成“补丁”（Patches），并应用到真实 DOM 上，仅更新变化的部分。例如：

• 替换节点：直接替换旧节点。
• 修改属性：更新 DOM 元素的 class、style 等。
• 调整子节点顺序：通过插入、删除或移动操作优化渲染。

二、Vue 中虚拟 DOM 的具体实现

1、渲染函数与 h() 函数

Vue 的渲染函数使用 h() 函数（即 createElement）创建虚拟 DOM 节点。例如：

render() {
  return h('div', { class: 'container' }, [
    h('p', { style: { color: 'red' } }, 'Hello Vue')
  ]);
}

2、响应式系统与虚拟 DOM 的结合

Vue 的响应式系统会监听数据变化，当数据变化时，触发组件的重新渲染：

• 数据变化 → 触发 setter → 通知依赖更新 → 重新执行渲染函数 → 生成新的虚拟 DOM 树 → Diff 对比 → 更新真实 DOM。

3、优化策略

• 组件级更新：Vue 的更新是组件级别的，只有数据变化的组件会重新渲染。
• 异步更新队列：Vue 会将多次数据变更合并到一次更新中，避免频繁渲染。

---

三、Vue 中虚拟 DOM 的优势

1. 性能优化

   • 减少直接操作真实 DOM 的次数，避免频繁重排（Reflow）和重绘（Repaint）。
   • 通过 Diff 算法和批量更新机制，提升渲染效率。

2. 跨平台能力
   虚拟 DOM 抽象了渲染逻辑，使得 Vue 可以适配不同平台（如浏览器、移动端、小程序）。

3. 开发体验提升

   • 数据驱动视图，开发者无需手动操作 DOM。
   • Vue 封装了 Diff 和 Patch 过程，简化了复杂度。

---

四、示例代码

以下是一个简单的 Vue 组件，展示了虚拟 DOM 的工作流程：

<template>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello Vue",
      };
    },
    methods: {
      updateMessage() {
        this.message = "Updated Message";
      },
    },
  };
</script>

1. 初始渲染时，生成虚拟 DOM 树并转换为真实 DOM。
2. 点击按钮后，message 数据变化，触发重新渲染。
3. Vue 对比新旧虚拟 DOM 树，更新真实 DOM 中的文本内容。

---

五、总结

Vue 利用虚拟 DOM 实现页面更新的核心流程包括：

1. 模板编译为渲染函数。
2. 生成虚拟 DOM 树。
3. 初始渲染时，将虚拟 DOM 转换为真实 DOM。
4. 数据变化时，重新生成虚拟 DOM 树并通过 Diff 算法对比差异。
5. 根据差异更新真实 DOM。

虚拟 DOM 的优势在于性能优化、跨平台能力和开发体验提升，是 Vue 实现高效渲染的关键技术之一。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24