vue 使用 h函数

### Vue 3 中 `h` 函数的使用方法 #### 创建 VNode 的基本语法 在 Vue 3 中，`h` 是一个全局 API，用于创建虚拟 DOM 节点 (VNodes)[^1]。其基础签名如下： ```javascript const vnode = h(type, props?, children?) ``` - **type**: 可以为 HTML 标签名字符串、组件定义对象或其它返回 VNode 的函数。 - **props** *(可选)*: 包含属性的对象，如类名、样式、事件监听器等。 - **children** *(可选)*: 子节点可以是单个 VNode 或者一组子 VNodes。 #### 示例：简单创建一个 VNode 下面的例子展示了如何利用 `h` 来构建最简单的按钮元素并赋予点击行为: ```javascript import { h } from 'vue'; // 定义渲染函数 function renderButton() { return h('button', { onClick(event) { console.log('Button clicked!', event); } }, 'Click Me'); } ``` 此代码片段会生成 `<button>Click Me</button>` 这样的 HTML 结构，并为其绑定了一个点击处理程序。 #### 使用于组合式API中 当与 Composition API 结合时，可以在 setup 方法内部调用 `h()` 构建动态的内容或者条件性的界面部分[^2]: ```javascript export default { setup(props, context) { const count = ref(0); function incrementCounter() { count.value++; } return () => h( 'div', null, [ h('p', `Count is ${count.value}`), h('button', { onClick: incrementCounter }, '+') ] ); }, }; ``` 上述例子实现了计数器功能，每当按下 '+' 按钮时更新显示数值[^4]。 #### 插槽 Slot 和 `h` 函数一起工作 为了支持具名插槽和作用域插槽，在传递给 `h` 的第三个参数里还可以嵌套更复杂的结构来描述这些特性: ```javascript return h(MyComponent, {}, { header: () => h('header', 'This is a header'), footer: ({ msg }) => h('footer', `${msg}!`) }); ``` 这里假设 MyComponent 接受两个名为 `header` 和 `footer` 的插槽；第二个插槽还接收来自父级的数据作为参数。 #### 关联问题探讨 通过以上介绍可以看出，`h` 不仅限于直接操作DOM，它也是实现高级特性的桥梁之一，比如高阶组件(HOCs)，这使得开发者能够更加灵活地控制应用的行为模式[^3]。