Vue 2 和 Vue 3 的虚拟 DOM对比

歪？我是皮皮！

已于 2025-05-20 16:52:10 修改

阅读量1.1k

点赞数 26

文章标签： vue.js javascript 前端

于 2025-05-20 16:50:46 首次发布

本文链接：https://blog.csdn.net/weixin_43837505/article/details/148091319

版权

虚拟 DOM（Virtual DOM）是 Vue 的核心概念之一，它通过在内存中构建轻量级的 JavaScript 对象（即 VNode）来描述真实 DOM 结构，从而优化渲染性能。Vue 3 在虚拟 DOM 的实现上做了许多优化，使其比 Vue 2 更高效。

1. 虚拟 DOM 的基本概念

什么是虚拟 DOM？

虚拟 DOM（Virtual DOM） 是一个 JavaScript 对象，用于描述真实 DOM 的结构。
作用：
- 减少直接操作 DOM 的开销（DOM 操作很慢）。
- 通过 Diff 算法比较新旧 VNode，找出最小变化，再批量更新真实 DOM。

虚拟 DOM 的工作流程

模板编译：.vue 文件的 <template> 被编译成 render() 函数。
生成 VNode：render() 执行后返回虚拟 DOM（VNode）。
Diff 比对：新旧 VNode 比较，找出差异（Patch）。
更新 DOM：仅修改变化的部分，而不是整个 DOM 树。

2. Vue 2 的虚拟 DOM

特点

全量 Diff：
- 每次数据变化时，递归比对整个 VNode 树，即使某些节点是静态的。
- 缺点：当组件较大时，性能较差。
静态节点优化较少：
- 静态节点（如 <div>Hello</div>）仍然会被比对，即使它们永远不会变化。
基于 Object.defineProperty 的响应式：
- 数据变化时，需要递归遍历所有依赖，可能导致性能问题。

示例

// Vue 2 的虚拟 DOM 结构示例
const vnode = {
  tag: 'div',
  data: { attrs: { id: 'app' } },
  children: [
    { tag: 'p', children: 'Hello' } // 即使这个 p 标签是静态的，仍然会被比对
  ]
}

3. Vue 3 的虚拟 DOM（优化点）

Vue 3 对虚拟 DOM 进行了重大优化，主要改进包括：

patchFlag：标记动态节点（如 1 表示文本动态），跳过静态节点比对。
hoistStatic：将静态节点提升到渲染函数外部，避免重复创建。

1. 静态提升（Static Hoisting）

优化点：将静态节点（不会变化的 DOM）提升到渲染函数外部，避免重复创建和比对。

2. Patch Flag（标记动态节点）

优化点：在编译阶段标记动态节点（如 {{ data }}、v-bind），Diff 时只比对变化的节点。
示例：
```
<div :class="dynamicClass">{{ dynamicText }}</div>
```
Diff 时：只检查 dynamicText 和 dynamicClass，跳过静态部分。

3. 缓存事件处理函数

优化点：避免在每次渲染时重新创建事件函数（如 @click）。
示例：
```
<button @click="handleClick">Click</button>
```
- Vue 2：每次渲染都会生成新的 handleClick 函数。
- Vue 3：缓存 handleClick，除非依赖变化。

4. 更高效的 Diff 算法

优化点：
- 采用 “最长递增子序列”算法 优化列表比对（v-for）。
- 减少不必要的 DOM 操作。

4. Vue 2 vs Vue 3 虚拟 DOM 对比

特性	Vue 2	Vue 3
Diff 策略	全量递归比对	按需比对（`PatchFlag` 标记动态节点）
静态节点处理	仍然比对	静态提升（`hoistStatic`）
事件处理	每次渲染重新创建	缓存事件函数
列表优化（v-for）	简单比对（可能低效）	使用“最长递增子序列”算法优化
性能	较慢（大组件更新成本高）	更快（减少不必要的计算）