Vue2-虚拟DOM树和虚拟节点

虚拟DOM树和虚拟节点

虚拟 DOM 树与虚拟节点（VNode）：核心概念与解析

虚拟 DOM（Virtual DOM）是前端框架（如 Vue、React）的核心机制，本质是用 JavaScript 对象模拟真实 DOM 结构，通过对比虚拟 DOM 的差异（Diff 算法）来最小化真实 DOM 操作，提升页面更新性能。其中，虚拟节点（VNode） 是构成虚拟 DOM 树的基本单元，虚拟 DOM 树则是由多个 VNode 嵌套组成的树形结构。

一、虚拟节点（VNode）：DOM 节点的 “JS 替身”

1. 定义

虚拟节点是一个普通 JavaScript 对象，包含描述真实 DOM 节点的所有关键信息（标签名、属性、子节点、内容等），是对真实 DOM 的抽象描述。

2. 核心结构（以 Vue 为例）

一个典型的 VNode 结构如下（简化版）：

const vnode = { // 核心属性 tag: 'div', // 标签名（如div、span，组件则为组件对象） props: { // 节点属性（如class、style、onClick） class: 'container', style: { color: 'red' } }, children: [ // 子虚拟节点（数组，嵌套VNode） { tag: 'p', children: ['Hello Virtual DOM'] } ], text: null, // 文本节点内容（与children互斥） el: null, // 对应的真实DOM节点（渲染后赋值） key: 'unique-key', // 用于Diff算法的唯一标识 shapeFlag: 1, // Vue优化标识（标记节点类型：元素/文本/组件等） };

3. VNode 的类型

二、虚拟 DOM 树：VNode 的嵌套组合

1. 定义

虚拟 DOM 树是以根 VNode 为起点，所有子 VNode 嵌套组成的树形结构，完全映射真实 DOM 的层级关系。

2. 示例：真实 DOM vs 虚拟 DOM 树

真实 DOM 结构

<div class="app"> <h1>虚拟DOM示例</h1> <ul> <li>节点1</li> <li>节点2</li> </ul> </div>

对应的虚拟 DOM 树（简化版）

const vdomTree = { tag: 'div', props: { class: 'app' }, children: [ { tag: 'h1', children: [{ text: '虚拟DOM示例' }] }, { tag: 'ul', children: [ { tag: 'li', children: [{ text: '节点1' }] }, { tag: 'li', children: [{ text: '节点2' }] } ] } ] };

3. 虚拟 DOM 树的核心特性

轻量：仅保留 DOM 的关键信息，比真实 DOM（包含大量浏览器内置属性）更简洁；

易操作：JS 层面修改虚拟 DOM 树无 DOM 重排 / 重绘，性能开销极低；

跨平台：可将虚拟 DOM 树渲染到不同平台（如浏览器 DOM、小程序、Canvas）。

三、虚拟 DOM 树的核心工作流程

框架中虚拟 DOM 的完整生命周期：

生成：首次渲染时，将模板 / JSX 转换为虚拟 DOM 树；

渲染：将虚拟 DOM 树转换为真实 DOM，挂载到页面；

更新：数据变化时，生成新的虚拟 DOM 树；

对比（Diff）：对比新旧虚拟 DOM 树的差异（只对比同层级节点，降低复杂度）；

打补丁（Patch）：只将差异部分更新到真实 DOM，而非重绘整个页面。

四、关键优势与注意事项

优势

性能优化：减少真实 DOM 操作（DOM 操作是前端性能瓶颈）；

跨平台：虚拟 DOM 与平台无关，可适配浏览器、移动端、SSR 等；

抽象化：开发者无需直接操作 DOM，专注业务逻辑。

注意事项

虚拟 DOM 本身有开销（JS 对象创建、Diff 对比），简单场景下（如静态页面）可能不如直接操作 DOM；

Diff 算法的效率决定虚拟 DOM 的性能（如 Vue/React 的 Diff 都做了分层、key 优化）。

总结

简单来说，无论是虚拟DOM树或者虚拟节点，都是前端框架为了模拟真实DOM框架的手段。核心目的都是为了利用JS对象来代替真实的DOM操作

虚拟节点（VNode）：包含了一个DOM节点的一切关键信息，并通过一种特定的结构罗列出来

虚拟树：多个VNode通过嵌套叠加起来的集合