h 函数是 vue 3 创建虚拟节点的核心工具，替代 vue 2 的 createelement，返回描述 dom 的 js 对象，用于渲染函数、自定义指令等高级用法，签名 h(type, props?, children?)。
h 函数是 Vue 3 中创建虚拟节点（VNode）的核心工具，它替代了 Vue 2 中的 createElement，本质是返回一个描述 DOM 结构的普通 JavaScript 对象。掌握 h 函数，才能真正理解组合式 API 中的渲染函数（render）、自定义指令、高阶组件等高级用法。
h 函数的基本语法和参数含义
h 函数签名是：h(type, props?, children?)，三个参数均为可选，但至少传入 type（组件名、HTML 标签名或函数）。
-
type：可以是字符串（如
'div'、'button'），也可以是已注册的组件对象、异步组件、或返回 VNode 的函数（用于动态渲染） -
props：对象，对应 HTML 属性、DOM 事件（用
onXxx形式，如{ onClick: handler }）、指令（如{ directives: [{ name: 'focus' }] }） - children：支持多种格式：字符串、数组（多个 VNode）、其他 h 调用结果、甚至 null/undefined（表示无子节点）。注意：不能直接传响应式对象，需解包或计算后传入
用 h 动态生成标签和条件内容
相比模板，h 函数天然支持逻辑判断与动态结构。比如根据状态决定渲染标题级别或是否显示按钮：
示例：动态生成 heading 标签
const render = () => {
const level = 2;
const title = '欢迎来到首页';
return h(`h${level}`, { class: 'title' }, title);
};
示例：条件渲染子节点
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
return h('div', [
h('span', '状态：'),
isLoaded ? h('strong', '已就绪') : h('em', '加载中...'),
isError && h('p', { style: { color: 'red' } }, '出错了')
]);
在 setup 中结合 render 函数使用 h
当需要完全控制渲染逻辑时，可在 setup 返回一个 render 函数（而非 template）：
export default {
setup(props, { slots }) {
const count = ref(0);
const increment = () => count.value++;
return () => h('div', { class: 'counter' }, [
h('h2', `当前计数：${count.value}`),
h('button', { onClick: increment }, '点我加一'),
// 插槽内容直接透传
slots.default && slots.default()
]);
}
};
注意：render 函数中访问响应式数据要确保触发依赖收集——直接读取 count.value 是有效的；若用计算属性，需用 computed(() => ...) 包裹后再取 .value。
嵌套组件、作用域插槽与事件透传技巧
h 可以精准控制组件调用细节。例如手动调用带插槽的组件，并传递作用域插槽函数：
h(MyModal, {
modelValue: isOpen.value,
'onUpdate:modelValue': (v) => isOpen.value = v,
// 作用域插槽写法：对象键为插槽名，值为接收 props 的函数
#default: ({ item }) => h('li', item.name),
footer: () => h('button', { onClick: confirm }, '确认')
}, null);
事件名需按 kebab-case 转为 camelCase 并加 on 前缀（如 @click.native → onClick）；v-model 需拆解为 prop + 事件对；指令需通过 directives 数组显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
