vue中虚拟dom节点由h函数创建vnode对象，它作为轻量描述性js对象，含type、props、children等字段，不直接操作dom；经renderer驱动，通过patch流程映射为真实dom，模板编译也转为h调用，实现跨平台渲染。
Vue.js 中的虚拟 DOM 节点创建，核心就是 h 函数生成 VNode 对象，它不直接操作真实 DOM，而是产出一个轻量、可比对、可复用的 JavaScript 描述对象。这个过程看似简单，背后却串联起响应式、diff 算法和真实 DOM 更新整条链路。
h 函数是 VNode 的“工厂函数”
h（hyperscript 缩写）本质是一个纯函数，输入结构信息，输出标准 VNode 对象。它不是 Vue 渲染的入口，而是构建虚拟节点的最小单元工具：
- type 参数决定节点类型：可以是字符串（
'div'）、组件对象（MyButton）、异步组件或函数； - props 参数承载配置：HTML 属性（
class、id）、事件监听器（必须用驼峰，如onClick）、指令（directives: [{ name: 'focus' }]）； - children 参数灵活支持多种形态：字符串、单个 VNode、VNode 数组，甚至
null或undefined表示无内容； - 参数顺序智能推断：比如
h('p', 'hello')自动识别第二个参数为 children；h('div', {}, h('span'))则明确将空对象视为 props。
VNode 是一个描述性普通对象
调用 h() 返回的不是 DOM 元素，而是一个具备固定字段的 plain JS 对象，典型结构包括：
-
type：标识节点种类（'div'、组件构造器、TextSymbol 等）； -
props：归一化后的属性集合，含 class/style/on 开头的事件等； -
children：已标准化的子节点，可能是数组、字符串或 null； -
key和ref：用于 diff 和引用管理，由 normalizeKey/normalizeRef 处理； -
shapeFlag：内部位掩码，快速区分元素、组件、文本、Fragment 等类型。
这个对象本身不带行为，没有原型方法，也不持有 DOM 引用——它只负责“说清楚要渲染什么”，把执行权留给后续的 renderer。
OC SSH Tunnel Node Recovery
下载
诊断并恢复通过 SSH 隧道连接的 OpenClaw 节点。用于解决配对必需错误、隧道冲突、远程端点错误以及 SSH 目标配置错误等问题。
从 VNode 到真实 DOM 需要 renderer 驱动
VNode 创建完后不会自动上屏，必须交由 Vue 的 renderer 模块处理：
- render 函数中返回的 VNode，会被
renderEffect收集并触发 patch 流程； - renderer 根据 VNode 的
type和shapeFlag分发到对应子模块（如patchElement、mountComponent）； - 最终通过原生 DOM API（
document.createElement、appendChild等）创建或更新真实节点； - 整个过程支持服务端渲染（SSR）、Web Components、Canvas 等多平台目标，靠的就是 VNode 的平台无关性。
模板编译也走 h 函数路径
你写的单文件组件模板（<template><div>{{ msg }}</div></template>）在构建阶段会被 Vue 编译器转成等效的 h() 调用：
-
<div><p>hi</p></div>→h('div', null, [h('p', null, 'hi')])； - 插值表达式
{{ msg }}编译为响应式代理访问 + 文本 VNode 更新逻辑； - 这意味着无论写模板还是手写 render，底层都统一到 VNode 构建和 patch 流程，保持语义一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
