当前位置：首页 > VUE

vue虚拟节点的实现

2026-01-21 13:33:49VUE

Vue 虚拟节点的实现

Vue 的虚拟节点（Virtual DOM）是其高效渲染的核心机制之一。虚拟节点是对真实 DOM 的轻量级抽象表示，通过比较新旧虚拟节点的差异，最小化对真实 DOM 的操作，提升性能。

虚拟节点的基本结构

Vue 的虚拟节点是一个普通的 JavaScript 对象，通常包含以下关键属性：

tag：节点的标签名（如 div、span）。
data：节点的属性、样式、事件等（如 class、style、onClick）。
children：子节点数组，可以是字符串（文本节点）或其他虚拟节点。
elm：对应的真实 DOM 节点（在 patch 过程中挂载）。
key：节点的唯一标识，用于优化 diff 算法。

示例虚拟节点对象：

{
  tag: 'div',
  data: { class: 'container' },
  children: [
    { tag: 'span', data: {}, children: 'Hello World' }
  ],
  key: 'unique-key'
}

虚拟节点的创建

Vue 通过 createElement 函数（通常缩写为 h）创建虚拟节点。在编译模板或手写渲染函数时，h 函数会被调用生成虚拟节点树。

// 示例：渲染函数生成虚拟节点
render(h) {
  return h('div', { class: 'container' }, [
    h('span', {}, 'Hello World')
  ]);
}

虚拟节点的 Diff 算法

当状态变化时，Vue 会生成新的虚拟节点树，并与旧的虚拟节点树通过 Diff 算法比较差异（称为 patch 过程）。Diff 算法的核心逻辑包括：

同层比较：只比较同一层级的节点，不跨层级递归。
Key 优化：通过 key 标识复用相同节点，避免不必要的销毁和重建。
节点类型判断：如果节点类型不同（如 div 变为 span），直接替换整个节点。
属性更新：对比 data 中的属性差异，更新真实 DOM 的属性和事件。

虚拟节点的 Patch 过程

Patch 过程是将虚拟节点的变化应用到真实 DOM 的步骤：

创建新节点：如果旧节点不存在，直接创建新 DOM 节点并插入。
删除旧节点：如果新节点不存在，移除旧 DOM 节点。
更新节点：如果节点类型相同，递归比较子节点并更新属性。

示例代码片段（简化版）：

function patch(oldVnode, newVnode) {
  if (!oldVnode) {
    // 创建新节点
    const el = createElm(newVnode);
    parentElm.insertBefore(el, referenceElm);
  } else if (!newVnode) {
    // 删除旧节点
    parentElm.removeChild(oldVnode.elm);
  } else if (sameVnode(oldVnode, newVnode)) {
    // 更新节点
    patchVnode(oldVnode, newVnode);
  } else {
    // 替换节点
    const el = createElm(newVnode);
    parentElm.replaceChild(el, oldVnode.elm);
  }
}