Vue3核心技术之虚拟DOM_vue3 虚拟dom-优快云博客

本文链接：https://blog.youkuaiyun.com/gklcsdn/article/details/144022917

在 Vue 3 中，**虚拟 DOM（Virtual DOM）**是核心技术之一，它通过在内存中创建轻量级的 DOM 表示，优化了 UI 渲染的性能。

1. 什么是虚拟 DOM？

虚拟 DOM 是一种以 JavaScript 对象形式表示真实 DOM 树的技术。它的作用是将 UI 的状态与 DOM 的操作解耦，避免频繁的真实 DOM 操作，从而提升性能。

特点：

轻量级表示： 虚拟 DOM 是一个简单的 JavaScript 对象，描述了 DOM 的结构和状态。
高效更新： 通过比较前后两次虚拟 DOM 的差异（diff），仅更新变化的部分，而不是重新渲染整个页面。
跨平台： 虚拟 DOM 不依赖特定的环境，因此可以用于浏览器、服务器端渲染（SSR）或移动端渲染（如 Weex）。

2. Vue 3 中虚拟 DOM 的工作原理

基本流程

创建虚拟 DOM：组件的模板通过编译器转换成虚拟 DOM 描述。
首次渲染：
- Vue 生成整个虚拟 DOM 树。
- 将虚拟 DOM 转换为真实 DOM 并插入页面。
更新渲染：
- 数据发生变化时，Vue 生成新的虚拟 DOM 树。
- 比较新旧虚拟 DOM 树的差异（diff 过程）。
- 将差异映射到真实 DOM，仅更新需要变动的部分。

核心结构

虚拟 DOM 在 Vue 3 中被实现为一个 VNode（Virtual Node）对象。它的基本结构如下：

const vnode = {
  type: 'div',        // 元素类型
  props: { id: 'app' }, // 属性
  children: [          // 子节点（可以是字符串或嵌套的 vnode）
    { type: 'span', props: null, children: 'Hello' },
  ],
};

Diff 算法

Vue 3 中的 diff 算法进行了优化，采用双端比较策略：

双端比较：通过同时从数组的两端进行比较，减少不必要的遍历。
Key 优化：如果节点有 key，Vue 会使用哈希表加速查找，提高效率。
批量更新：Vue 会将多次状态变更合并为一次 DOM 操作，避免频繁触发重排（reflow）和重绘（repaint）。

3. Vue 3 虚拟 DOM 的优化

3.1 静态提升

Vue 3 的编译器会将不变的静态节点提升到渲染函数之外，只需创建一次，避免重复创建虚拟 DOM。

<div>
  <span>静态内容</span> <!-- 不会重新创建 -->
  <p>{{ dynamic }}</p>   <!-- 动态内容会更新 -->
</div>

在渲染过程中，<span> 节点会被提升为静态内容，而 <p> 节点会作为动态内容处理。

3.2 Slot 动态提升

对于组件插槽内容，Vue 3 会区分静态和动态插槽内容，仅更新动态部分。

<MyComponent>
  <template v-slot:default>
    <div>静态内容</div>
    <p>{{ dynamicContent }}</p>
  </template>
</MyComponent>

在这里，<div> 会被标记为静态内容，而 <p> 会作为动态内容。

3.3 缓存事件处理程序

Vue 3 会缓存事件处理程序（如 @click），避免每次渲染时重复创建函数，从而减少内存开销和性能损耗。

3.4 Fragment 支持

Vue 3 引入了 Fragment（片段）支持，允许组件返回多个根节点，这避免了多余的包装元素，提升了渲染效率。

<template>
  <>
    <h1>标题</h1>
    <p>内容</p>
  </>
</template>

上述代码在虚拟 DOM 中会被处理为多个子节点，无需额外的 <div> 包裹。

4. 与 Vue 2 的虚拟 DOM 的对比

特性	Vue 2	Vue 3
实现方式	虚拟 DOM，基于 `VNode` 对象	全新设计的高性能 `VNode` 系统
Diff 算法	单端比较	双端比较，性能更高
静态节点提升	无静态节点提升	静态节点提升优化，减少不必要的 diff
Fragment 支持	不支持	支持多个根节点，避免额外 DOM 包裹
编译器优化	编译生成效率较低	静态内容预计算，动态节点标记优化