h() 函数
在 Vue 中，h() 函数（全称为 createVNode）是创建虚拟节点（VNode）的核心工具，它是 Vue 渲染系统的基础。以下是关于 h() 函数的详细解释：
1. 什么是 h() 函数？
- 作用：
h()是hyperscript的缩写，意为“生成 HTML 的脚本”。它通过 JavaScript 对象描述 DOM 节点，用于手动编写 Vue 的渲染函数（替代模板语法）。 - 别名：在 Vue 3 中，
h()是createVNode()的别名，两者完全等价。
2. 为什么需要 h() 函数？
- 模板语法的局限性：Vue 的模板语法（如
<div>{{ message }}</div>）适合简单场景，但对于动态生成复杂结构或运行时计算的 UI，模板会显得冗长。 - 性能优化：直接使用
h()可以绕过模板编译过程，生成更高效的渲染逻辑。 - 自定义组件开发：在开发高阶组件、插件或库时，
h()能提供更灵活的渲染控制。
3. 基本语法
h(type, // 必选：组件类型或 HTML 标签名props, // 可选：传递给组件的 propschildren // 可选：子节点（文本、数组或函数）
)
示例 1：创建简单的 HTML 元素
import { h } from 'vue';// 创建 <div class="container">Hello World</div>
const vnode = h('div', { class: 'container' }, 'Hello World');
示例 2：创建带子节点的元素
// 创建嵌套结构：<div><span>Text</span></div>
const vnode = h('div', [h('span', 'Text')
]);
示例 3：传递 props 和事件
// 创建按钮并绑定点击事件
const vnode = h('button',{class: 'btn',onClick: () => console.log('Clicked')},'Click me'
);
4. 与组件结合使用
h() 不仅能创建 HTML 标签，还能渲染自定义组件：
import MyComponent from './MyComponent.vue';// 渲染自定义组件并传递 props
const vnode = h(MyComponent, {msg: 'Hello from h()'
});
5. 在你的代码中的应用
在之前的代码中，summaryCellRenderer() 可能返回一个通过 h() 创建的 VNode：
// 用户自定义的渲染函数
summaryCellRenderer: () => {// 返回一个带样式的组件return h('span', { class: 'text-red-500' }, '总计：100');
}
当 Vue 遇到 <component :is="summaryCellRenderer()"></component> 时，会直接渲染这个 VNode，最终在页面上显示为：
<span class="text-red-500">总计：100</span>
6. 与 JSX 的关系
- JSX：是一种 JavaScript 的语法扩展，看起来像 HTML，但会编译为
h()调用。 - Vue + JSX：Vue 3 支持 JSX 语法，本质上是对
h()的语法糖。
JSX 示例：
// JSX 写法
const vnode = <div class="container">Hello</div>;// 等价于 h() 写法
const vnode = h('div', { class: 'container' }, 'Hello');
7. 总结
h() 函数是 Vue 底层的渲染工具，它允许你：
- 通过 JavaScript 对象描述 DOM 结构；
- 动态创建 HTML 元素或组件；
- 在运行时灵活生成 UI，避开模板的限制。
在你的代码场景中，h() 让用户可以自定义汇总单元格的复杂内容（如带样式的文本、按钮、甚至嵌套组件），并通过 <component> 动态渲染这些内容。