Vue 3 中的 `h` 函数详解

h 函数是 Vue 3 中用于创建**虚拟 DOM 节点(VNode)**的核心函数，它是 Vue 渲染系统的基石。下面我将全面解释它的作用、用法和重要性。

1. h 函数的基本概念

h 是 createVNode 的简称，来源于"hyperscript"的缩写传统。它的主要作用是：

• 创建虚拟 DOM 节点(VNode)
• 描述 UI 应该呈现的样子
• 作为模板编译的底层实现

2. h 函数的三种使用方式

基本用法

import { h } from 'vue'

// 创建一个div元素
const vnode = h('div', 'Hello World')

完整签名

h(type, props, children)

• type: 可以是HTML标签名、组件或异步组件
• props: 包含属性、prop、事件等的对象
• children: 子节点，可以是字符串、数组或其他VNode

3. h 函数的具体应用

创建原生元素

h('div', { class: 'container' }, [
  h('h1', '标题'),
  h('p', '内容')
])

创建组件

import MyComponent from './MyComponent.vue'

h(MyComponent, {
  propA: 'value'
})

带事件的元素

h('button', {
  onClick: () => console.log('点击了')
}, '点击我')

4. h 函数与模板的关系

模板最终会被编译成使用 h 函数的渲染函数。例如：

<template>
  <div class="container">
    {{ message }}
  </div>
</template>

编译后相当于：

render() {
  return h('div', { class: 'container' }, this.message)
}

5. 为什么需要 h 函数？

1. 性能优化：虚拟DOM可以高效地比较和更新实际DOM
2. 灵活性：可以动态创建任意复杂的UI结构
3. 跨平台：不直接依赖浏览器DOM，可以渲染到不同环境
4. 组合性：可以作为JavaScript值传递和组合

6. 实际开发中的使用场景

1. 渲染函数：在 setup() 中返回渲染函数时
2. 函数式组件：创建无状态组件
3. 高阶组件：包装或修改现有组件
4. JSX：JSX会被Babel转换为 h 函数调用

7. 与 Vue 2 的区别

在 Vue 2 中，h 函数是作为渲染函数的参数传入：

// Vue 2
render(h) {
  return h('div')
}

而在 Vue 3 中，需要从 vue 中显式导入：

// Vue 3
import { h } from 'vue'

setup() {
  return () => h('div')
}

h 函数是 Vue 3 响应式和渲染系统的关键部分，理解它有助于更深入地掌握 Vue 的工作原理和高级用法。