一：引言

在Vue中，h 函数和 render 函数是用于手动控制组件渲染的核心 API，那么他们有什么不同呢？

二：类别

1：作用上

h 函数（createVNode）=> 是 ‌创建虚拟 DOM 节点（VNode）‌。接收参数并返回一个描述 DOM 结构的虚拟节点对象

render 函数=>是 ‌组件渲染的入口函数‌，用于定义组件如何渲染到页面上。它必须返回一个 VNode（通过 h 创建）

2：定位上

h 函数（createVNode）=>工具函数，用于生成虚拟节点

render 函数=>组件的核心渲染逻辑，替代模板的作用

3：关系上

h 函数（createVNode）=>负责创建单个虚拟 DOM 节点

render 函数=>负责组织多个 h 函数的调用，生成完整的虚拟 DOM 树

三：代码

1：h 函数

h('div', { class: 'header' }, [
  h('h1', 'Title'),
  h('button', { onClick: handleClick }, 'Click me')
])

2：render 函数

export default {
  render() {
    return h('div', { id: 'app' }, this.message);
  },
  data() {
    return { message: 'Hello Vue!' };
  }
}

四：总结

1：h‌：用于创建虚拟节点，是构建渲染内容的“积木”。

‌2：render‌：定义组件如何渲染，通过调用 h 组装出完整的虚拟 DOM 树

3：render 函数是生成虚拟 DOM 的“过程”，而 h 函数是生成虚拟 DOM 的“工具”

五：拓展

（1）Vue3中的变化

1：h需要显示导入

import { h } from 'vue';

2：组合API中使用，在setup()中返回渲染函数

import { h, ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    return () => h('div', count.value); // 返回渲染函数
  }
}