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 的渲染机制，编写更灵活的组件。
