深入理解 Vue 3 中的 h 函数

1. 什么是 h 函数？

h 函数是 Vue 3 中用来创建虚拟节点（VNode）的工具，它的本质是 createVNode 方法的简写。 h 函数的语法签名如下：

h(type, props?, children?)

• type: 节点的类型，可以是 HTML 标签（如 'div'）、组件或函数。
•  props: 节点的属性对象，例如 class、style、事件监听器等。
• children: 子节点，可以是字符串、数组或者嵌套的 h 函数。

2. 为什么需要 h 函数？

Vue 通常是基于模板语法的，例如：

<template>
  <div class="container">
    <h1>Hello Vue 3</h1>
  </div>
</template>

模板语法非常直观，但在某些场景下，模板无法满足需求，例如：

1. 动态创建节点：节点类型、属性、内容需要通过逻辑动态生成。

2. 渲染函数：当组件没有模板时，使用渲染函数替代模板。

3. 使用 JSX：配合 JSX 语法编写更简洁的代码。  这时候，h 函数就派上了用场。

3. h 函数的基本用法

3.1 渲染一个简单的元素

import { h, defineComponent } from 'vue';

export default defineComponent({
  render() {
    return h('div', { class: 'my-container', style: { color: 'red' } }, 'Hello Vue 3');
  },
});

渲染结果：

<div class="my-container" style="color: red;">Hello Vue 3</div>

3.2 渲染一个组件

h 函数可以用来渲染子组件，并传递 props 和事件。

import { h, defineComponent } from 'vue';
import MyButton from './MyButton.vue';

export default defineComponent({
  render() {
    return h(MyButton, {
      type: 'primary',
      onClick: () => alert('Button Clicked!'),
    });
  },
});

3.3 渲染多个子节点

children 参数可以是一个数组，来表示多个子节点：

import { h } from 'vue';

export default {
  render() {
    return h('div', {}, [
      h('h1', {}, 'Title'),
      h('p', {}, 'This is a paragraph.'),
      h('button', { onClick: this.handleClick }, 'Click Me'),
    ]);
  },
  methods: {
    handleClick() {
      alert('Button clicked!');
    },
  },
};

3.4 动态生成内容

当需要根据数据动态生成节点时，h 函数非常灵活。

import { h } from 'vue';

export default {
  props: ['items'],
  render() {
    return h(
      'ul',
      {},
      this.items.map((item) => h('li', { key: item.id }, item.name))
    );
  },
};

4. h 函数与 JSX

Vue 3 支持 JSX 语法，JSX 其实是对 h 函数的封装和语法糖。通过编译，下面的 JSX 代码：

export default {
  render() {
    return (
      <div class="container">
        <h1>Hello Vue 3</h1>
        <p>Using JSX!</p>
      </div>
    );
  },
};

会被编译成：

import { h } from 'vue';

export default {
  render() {
    return h('div', { class: 'container' }, [
      h('h1', {}, 'Hello Vue 3'),
      h('p', {}, 'Using JSX!'),
    ]);
  },
};

5. 使用场景总结

1. 动态渲染：根据条件渲染不同的节点或组件。

2. 自定义渲染函数：当模板无法满足需求时，使用渲染函数。

3. 高级组件开发：编写高阶组件、动态组件时，h 提供更大的灵活性。

4. 结合 JSX：编写更清晰、可维护的代码。

6. 常见问题

Q1: h 和 Vue 2 中的 createElement 有什么区别？

• 在 Vue 2 中，createElement 用于创建虚拟节点。

• 在 Vue 3 中，h 是 createVNode 的简写，功能更强大、更灵活。 

Q2: 使用 h 和 JSX，性能有什么差别？

性能上没有显著差别，因为 JSX 最终会编译成 h 函数调用。选择哪个主要取决于个人开发习惯和团队代码风格。

7. 总结

• h 函数是 Vue 3 中创建虚拟 DOM 节点的核心工具。

• 通过 h 函数可以实现动态渲染、组件渲染以及复杂的渲染逻辑。

• 配合 JSX 使用，代码更加简洁、可读性更高。

• 掌握 h 函数，让你更好地理解 Vue 3 的渲染机制，编写更灵活的组件。