14.2.2 h() 函数：Vue 3 的渲染函数核心
在 Vue.js 的世界中，h() 函数，也称为“createElement”的别名（在 Vue 2 中直接使用 createElement），是 Vue 3 引入的一个核心概念，它位于 Vue 的响应式系统和组件系统之间，是构建虚拟 DOM（Virtual DOM）的基石。理解并掌握 h() 函数对于深入 Vue.js 的内部机制、优化性能以及实现高级组件模式至关重要。本章节将深入探讨 h() 函数的用法、参数、返回值及其在 Vue 3 应用中的实际应用。
1. h() 函数基础
h() 函数是 Vue 3 中用于创建虚拟 DOM 节点的函数。在 Vue 3 的 Composition API 中，虽然模板仍然是声明式地描述 UI 的首选方式，但在某些场景下，使用 h() 函数直接编写渲染函数可以提供更高的灵活性和控制力。例如，在动态组件、高性能列表渲染或复杂的 DOM 操作中，h() 函数显得尤为重要。
h() 函数的基本语法如下：
h(type, [props, children])
type：必需参数，表示要创建的节点类型。可以是字符串（表示 HTML 标签名或组件名）、组件选项对象或异步组件。props：可选参数，一个包含 DOM 属性、组件 props、事件监听器等选项的对象。children：可选参数，子节点列表/子节点。可以是字符串、数字来生成文本节点，也可以是通过h()函数创建的虚拟节点，或者是一个包含多个子节点的数组。
2. h() 函数的高级用法
2.1 插槽（Slots）
在 Vue 组件中，h() 函数也支持处理插槽。通过 props 对象的 slots 属性，可以传递插槽内容给子组件。例如：
h(MyComponent, {slots: {default: () => [h('p', '默认插槽内容'),h('p', '更多内容...')],namedSlot: () => h('span', '命名插槽内容')}})
2.2 绑定事件与监听器
在 props 对象中，你可以像处理 HTML 属性一样处理事件监听器。Vue 会自动将 on 前缀的事件名转换为监听器。例如，监听一个点击事件：
h('button', {onClick: () => console.log('按钮被点击了')})// 或者使用 `v-on` 的缩写 `@` 形式h('button', {'@click': () => console.log('按钮被点击了')})
3. h() 函数与 JSX
虽然 Vue 官方推荐使用模板语法来声明 UI，但 Vue 3 也支持使用 JSX（JavaScript XML）作为另一种选择。JSX 允许你在 JavaScript 代码中写类似 HTML 的语法，并通过 Babel 插件 @vue/babel-plugin-jsx 转换为 h() 函数的调用。这使得在 Vue 应用中结合 React 风格的 JSX 语法成为可能，特别是在需要更细粒度控制渲染逻辑时。
例如，以下 JSX 代码：
<div id="app"><h1>{title}</h1><button onClick={handleClick}>点击我</button></div>
经过 Babel 转换后，大致等同于：
h('div', { id: 'app' }, [h('h1', null, title),h('button', { onClick: handleClick }, '点击我')])
4. 性能优化与 h() 函数
虽然 h() 函数提供了极高的灵活性，但在使用时也需要注意其对性能的影响。频繁地创建和销毁虚拟 DOM 节点会增加浏览器的负担。因此，在编写使用 h() 函数的渲染函数时，应当注意以下几点：
- 减少不必要的节点创建：尽量复用已有的虚拟 DOM 节点，利用 Vue 的响应式系统来更新节点的属性或内容，而不是重新创建节点。
- 优化条件渲染：使用
v-if、v-else-if、v-else或v-show指令来智能地控制 DOM 的显示与隐藏，减少不必要的 DOM 操作。 - 利用
key属性：在列表渲染中，为每个节点指定一个唯一的key值，以帮助 Vue 跟踪每个节点的身份，从而实现高效的 DOM 更新。
5. 实战案例：使用 h() 函数构建动态表单
假设我们需要构建一个动态表单，表单的字段和验证规则根据后端返回的数据动态生成。在这种情况下，使用 h() 函数结合 Composition API 可以很好地实现这一需求。
import { ref, h } from 'vue';export default {setup() {const fields = ref([{ type: 'text', label: '姓名', name: 'name' },{ type: 'email', label: '邮箱', name: 'email' }]);const renderForm = () => {return h('form', null, fields.value.map(field => {const InputComponent = field.type === 'text' ? 'input' : 'input'; // 示例中简化处理，实际应区分不同组件return h('div', null, [h('label', { for: field.name }, field.label),h(InputComponent, {type: field.type,name: field.name,required: true})]);}));};return { renderForm };}}
注意：上述代码示例中，为了简化，所有输入字段都使用了 input 标签。在实际应用中，你可能需要根据 field.type 来动态选择不同的组件，如 TextInput, EmailInput 等自定义组件。
6. 结论
h() 函数作为 Vue 3 中构建虚拟 DOM 的核心工具，其重要性不言而喻。通过深入理解 h() 函数的用法和原理，开发者可以更加灵活地控制组件的渲染过程，实现复杂的 UI 逻辑和性能优化。同时，结合 JSX 的使用，Vue 开发者还可以享受 React 社区中丰富的生态资源和开发习惯，进一步拓宽 Vue 的应用场景和边界。
