当前位置：首页 > VUE

vue vnode实现

2026-02-10 02:59:03VUE

Vue VNode 实现原理

VNode（虚拟节点）是 Vue 中用于描述真实 DOM 的轻量级 JavaScript 对象。Vue 通过 VNode 实现高效的 DOM 更新和渲染。

VNode 的核心结构

VNode 是一个普通的 JavaScript 对象，包含以下关键属性：

vue vnode实现

{
  tag: 'div', // 标签名
  data: { attrs: { id: 'app' } }, // 属性、样式、事件等数据
  children: [], // 子节点数组
  text: 'Hello', // 文本内容（如果是文本节点）
  elm: null, // 对应的真实 DOM 节点
  key: undefined // 用于优化 diff 算法的 key
}

VNode 的创建过程

Vue 通过 createElement 函数（通常缩写为 h）创建 VNode。在编译阶段，模板会被编译成渲染函数，渲染函数中包含 h 调用：

// 模板
<div id="app">{{ message }}</div>

// 编译后的渲染函数
function render() {
  return h('div', { attrs: { id: 'app' } }, [this.message])
}

VNode 的 Diff 算法

当数据变化时，Vue 会生成新的 VNode 树，并与旧的 VNode 树进行对比（diff），找出最小化的 DOM 操作：

vue vnode实现

同级比较：只比较同一层级的节点，不跨层级比较
key 优化：通过 key 识别可复用的节点
双端比较：从新旧子节点的两端向中间比较

VNode 的 Patch 过程

Diff 完成后，Vue 会执行 patch 操作将变化应用到真实 DOM：

function patch(oldVnode, vnode) {
  if (sameVnode(oldVnode, vnode)) {
    // 相同节点，执行更新
    patchVnode(oldVnode, vnode)
  } else {
    // 不同节点，替换整个节点
    const parent = oldVnode.parentNode
    const elm = createElm(vnode)
    parent.insertBefore(elm, oldVnode)
    parent.removeChild(oldVnode)
  }
}

自定义 VNode 实现

可以手动创建简单的 VNode 实现：

class VNode {
  constructor(tag, data, children, text, elm) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
  }
}

function createElement(tag, data, children) {
  return new VNode(tag, data, children, undefined, undefined)
}