vue vnode实现

Vue VNode 实现原理

VNode（Virtual Node）是 Vue 的核心概念之一，用于描述真实 DOM 的轻量级虚拟表示。VNode 的实现涉及以下关键点：

VNode 的基本结构

VNode 是一个普通的 JavaScript 对象，包含描述 DOM 节点所需的信息。典型的 VNode 结构如下：

{
  tag: 'div',
  data: { attrs: { id: 'app' }, on: { click: handleClick } },
  children: [
    { tag: 'span', text: 'Hello' }
  ],
  elm: null, // 对应的真实 DOM 节点
  key: undefined,
  context: VueComponentInstance
}

VNode 的创建过程

Vue 通过 createElement 函数（通常缩写为 h）创建 VNode。该函数会根据传入的参数生成对应的虚拟节点：

// 示例：创建带子元素的 VNode
h('div', { class: 'container' }, [
  h('span', 'Text'),
  h(MyComponent, { props: { value: 1 } })
])

Patch 算法

当数据变化时，Vue 会通过 patch 函数比较新旧 VNode 并更新 DOM：

1. Diff 过程：仅在同层级比较节点，通过 key 优化复用。
2. 更新策略：
   • 相同节点：更新属性/事件监听器
   • 不同节点：创建新节点并替换旧节点
3. 子节点对比：采用头尾指针的双端比较算法优化列表渲染

性能优化关键

• 静态节点提升：编译阶段标记静态节点，避免重复 patch
• 事件缓存：将事件处理函数缓存到 VNode.data.on 中
• 异步更新：通过 nextTick 批量处理 DOM 更新

源码核心实现

Vue 的 VNode 实现主要分布在：

1. src/core/vdom/vnode.js - VNode 类定义
2. src/core/vdom/create-element.js - VNode 创建逻辑
3. src/core/vdom/patch.js - Diff 算法实现

自定义 VNode 示例

开发者可以通过 render 函数直接创建自定义 VNode：

render(h) {
  return h('div', [
    this.showHeader ? h('header', 'Title') : null,
    h('main', this.content)
  ])
}

这种虚拟 DOM 机制使 Vue 能高效计算最小化 DOM 操作，同时保持声明式的编程体验。