14.2.2 h()函数-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

### 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()` 函数的基本语法如下：

```javascript
h(type, [props, children])
```

- **`type`**：必需参数，表示要创建的节点类型。可以是字符串（表示 HTML 标签名或组件名）、组件选项对象或异步组件。
- **`props`**：可选参数，一个包含 DOM 属性、组件 props、事件监听器等选项的对象。
- **`children`**：可选参数，子节点列表/子节点。可以是字符串、数字来生成文本节点，也可以是通过 `h()` 函数创建的虚拟节点，或者是一个包含多个子节点的数组。

#### 2. `h()` 函数的高级用法

##### 2.1 插槽（Slots）

在 Vue 组件中，`h()` 函数也支持处理插槽。通过 `props` 对象的 `slots` 属性，可以传递插槽内容给子组件。例如：

```javascript
h(MyComponent, {
  slots: {
    default: () => [
      h('p', '默认插槽内容'),
      h('p', '更多内容...')
    ],
    namedSlot: () => h('span', '命名插槽内容')
  }
})
```

##### 2.2 绑定事件与监听器

在 `props` 对象中，你可以像处理 HTML 属性一样处理事件监听器。Vue 会自动将 `on` 前缀的事件名转换为监听器。例如，监听一个点击事件：

```javascript
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 代码：

```jsx
<div id="app">
  <h1>{title}</h1>
  <button onClick={handleClick}>点击我</button>
</div>
```

经过 Babel 转换后，大致等同于：

```javascript
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 可以很好地实现这一需求。

```javascript
import { ref, h } from 'vue';

export default {
  setup() {
    const fields = ref([
      { type: 'text', label: '姓名', name: 'name' },
      { type: 'email', label: '邮箱', name: 'email' }
    ]);

return { renderForm };
  }
}
```

注意：上述代码示例中，为了简化，所有输入字段都使用了 `input` 标签。在实际应用中，你可能需要根据 `field.type` 来动态选择不同的组件，如 `TextInput`, `EmailInput` 等自定义组件。

#### 6. 结论

`h()` 函数作为 Vue 3 中构建虚拟 DOM 的核心工具，其重要性不言而喻。通过深入理解 `h()` 函数的用法和原理，开发者可以更加灵活地控制组件的渲染过程，实现复杂的 UI 逻辑和性能优化。同时，结合 JSX 的使用，Vue 开发者还可以享受 React 社区中丰富的生态资源和开发习惯，进一步拓宽 Vue 的应用场景和边界。

该分类下的相关小册推荐：

Vue.js从入门到精通(四)

TypeScript和Vue从入门到精通(五)

Vue源码完全解析

TypeScript和Vue从入门到精通(三)

Vue原理与源码解析

Vue3技术解密

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(一)

移动端开发指南

vue项目构建基础入门与实战

Vue.js从入门到精通(一)