h() 函数

在 Vue 中，h() 函数（全称为 createVNode）是创建虚拟节点（VNode）的核心工具，它是 Vue 渲染系统的基础。以下是关于 h() 函数的详细解释：

作用：h() 是 hyperscript 的缩写，意为"生成 HTML 的脚本"。它通过 JavaScript 对象描述 DOM 节点，用于手动编写 Vue 的渲染函数（替代模板语法）。
别名：在 Vue 3 中，h() 是 createVNode() 的别名，两者完全等价。

模板语法的局限性 ：Vue 的模板语法（如 <div>{``{ message }}</div>）适合简单场景，但对于动态生成复杂结构或运行时计算的 UI，模板会显得冗长。
性能优化 ：直接使用 h() 可以绕过模板编译过程，生成更高效的渲染逻辑。
自定义组件开发 ：在开发高阶组件、插件或库时，h() 能提供更灵活的渲染控制。

javascript 复制代码

h(
  type,      // 必选：组件类型或 HTML 标签名
  props,     // 可选：传递给组件的 props
  children   // 可选：子节点（文本、数组或函数）
)

示例 1：创建简单的 HTML 元素

javascript 复制代码

import { h } from 'vue';

// 创建 <div class="container">Hello World</div>
const vnode = h('div', { class: 'container' }, 'Hello World');

示例 2：创建带子节点的元素

javascript 复制代码

// 创建嵌套结构：<div><span>Text</span></div>
const vnode = h('div', [
  h('span', 'Text')
]);

示例 3：传递 props 和事件

javascript 复制代码

// 创建按钮并绑定点击事件
const vnode = h(
  'button',
  {
    class: 'btn',
    onClick: () => console.log('Clicked')
  },
  'Click me'
);

h() 不仅能创建 HTML 标签，还能渲染自定义组件：

javascript 复制代码

import MyComponent from './MyComponent.vue';

// 渲染自定义组件并传递 props
const vnode = h(MyComponent, {
  msg: 'Hello from h()'
});

在之前的代码中，summaryCellRenderer() 可能返回一个通过 h() 创建的 VNode：

javascript 复制代码

// 用户自定义的渲染函数
summaryCellRenderer: () => {
  // 返回一个带样式的组件
  return h('span', { class: 'text-red-500' }, '总计：100');
}

当 Vue 遇到 <component :is="summaryCellRenderer()"></component> 时，会直接渲染这个 VNode，最终在页面上显示为：

html 复制代码

<span class="text-red-500">总计：100</span>

JSX 示例：

jsx 复制代码

// JSX 写法
const vnode = <div class="container">Hello</div>;

// 等价于 h() 写法
const vnode = h('div', { class: 'container' }, 'Hello');

h() 函数是 Vue 底层的渲染工具，它允许你：

在你的代码场景中，h() 让用户可以自定义汇总单元格的复杂内容（如带样式的文本、按钮、甚至嵌套组件），并通过 <component> 动态渲染这些内容。