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：
- Diff 过程：仅在同层级比较节点，通过
key优化复用。 - 更新策略：
- 相同节点：更新属性/事件监听器
- 不同节点：创建新节点并替换旧节点
- 子节点对比：采用头尾指针的双端比较算法优化列表渲染
性能优化关键
- 静态节点提升：编译阶段标记静态节点，避免重复 patch
- 事件缓存：将事件处理函数缓存到 VNode.data.on 中
- 异步更新：通过 nextTick 批量处理 DOM 更新
源码核心实现
Vue 的 VNode 实现主要分布在：
src/core/vdom/vnode.js- VNode 类定义src/core/vdom/create-element.js- VNode 创建逻辑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 操作，同时保持声明式的编程体验。
