vue h函数

### Vue 中 `h` 函数的用法及相关信息 #### 什么是 `h` 函数？ 在 Vue 的渲染机制中，`h` 是一个辅助函数（helper function），用于创建虚拟 DOM 节点。它的全名是 **hyperscript**，表示可以通过脚本生成 HTML 结构。`h` 函数的作用类似于 JSX，在 Vue 2 和 Vue 3 中有不同的引入方式。 --- #### Vue 2 中的 `h` 函数 在 Vue 2 中，`h` 函数通常是作为 `render` 方法的第一个参数被传入的。开发者可以直接在这个函数内部调用它来构建组件结构[^1]： ```javascript // Vue 2 示例 export default { render(h) { return h('div', { class: 'container' }, [ h('p', '这是一个段落'), h(MyComponent, { props: { message: '你好!' } }) ]); } }; ``` 在这里，`h` 接收三个主要参数： 1. **标签名称或组件**：可以是一个字符串（HTML 标签）或一个 Vue 组件。 2. **数据对象**：包含该节点的属性、事件监听器和其他配置项。 3. **子节点数组**：可以嵌套多个子节点。 --- #### Vue 3 中的 `h` 函数 Vue 3 对 `h` 函数进行了改进，允许直接从模块中导入，而不是依赖于上下文传递。这种方式更加灵活和直观[^1]： ```javascript import { h } from 'vue'; export default { setup() { return () => h('div', { class: 'container' }, [ h('p', '这是一个段落'), h(MyComponent, { message: '你好!' }) ]); } }; ``` 相比 Vue 2，Vue 3 提供了更简洁的方式，并支持组合式 API (`setup`) 来返回渲染逻辑。 --- #### 动态属性的应用场景 当需要动态设置某些属性时，`h` 函数显得尤为强大。例如，可以根据条件改变类名或其他属性[^3]： ```javascript const componentWithProps = () => { return h('div', { class: { visible: visible.value }, style: { color: 'red' } }, '我是 div'); }; ``` 在此示例中，`class` 属性会根据变量 `visible.value` 的布尔值决定是否应用样式。 --- #### 使用指令 除了基本的元素和组件渲染外，`h` 还能配合自定义指令完成复杂功能[^4]： ```javascript const App = { render(h) { return h('div', [ h('h1', 'Custom Directive Example'), h('button', { directives: [{ name: 'ajax', value: { url: 'https://jsonplaceholder.typicode.com/todos/1', name: 'Fetch Todo' }, arg: 'GET', modifiers: { log: true, alert: true } }] }, 'Fetch Data') ]); } }; ``` 此代码片段展示了一个带有自定义指令的按钮，点击后执行 AJAX 请求并处理响应。 --- #### 总结 无论是静态还是动态内容，`h` 函数都能满足开发者的多样化需求。通过合理运用其参数，能够实现复杂的 UI 构建以及交互逻辑。 ---