Vue3 h函数用法详解

h 函数是 Vue 3 中的渲染函数，用于以编程方式创建虚拟 DOM 节点（VNode）。

h 函数的基本语法：

h(tag, props, children)

tag：可以是 HTML 标签名、组件选项对象或组件名称
props：一个对象，包含要传递给元素或组件的属性
children：子节点，可以是字符串、VNode 或它们的数组

h函数的使用场景：

在 render 函数中创建 VNode：
- 当需要动态生成复杂的 DOM 结构时
- 当模板语法无法满足复杂的条件渲染需求时
在 setup 函数中返回渲染内容：
- 与组合式 API 结合使用，直接返回 h 函数创建的 VNode
动态创建组件：
- 根据条件或数据动态选择要渲染的组件
- 实现组件的动态切换
条件渲染复杂的 UI 结构：
- 当模板中的 v-if / v-else-if / v-else 变得过于复杂时
- 当需要根据多个条件组合生成不同的 UI 结构时
与 JSX 结合使用：
- 提供更灵活的方式来编写组件的渲染逻辑

基本用法

javascript 复制代码

import { h } from 'vue'

// 创建一个div元素
const vnode = h('div', { class: 'container' }, 'Hello World')

// 创建一个带有子元素的div
const vnodeWithChildren = h('div', { class: 'container' }, [
  h('h1', null, '标题'),
  h('p', null, '内容')
])

高级用法

javascript 复制代码

// 创建一个组件
import MyComponent from './MyComponent.vue'

const componentVnode = h(MyComponent, {
  props: {
    message: 'Hello'
  },
  on: {
    click: () => console.log('clicked')
  }
})

条件渲染

javascript 复制代码

function renderCondition(condition) {
  return h('div', null, [
    condition ? h('p', null, '条件为真') : h('p', null, '条件为假')
  ])
}

与模板语法的对比

模板语法：

javascript 复制代码

<template>
  <div class="container">
    <h1 v-if="showTitle">标题</h1>
    <p>{{ message }}</p>
  </div>
</template>

渲染函数：

javascript 复制代码

import { h } from 'vue'

export default {
  props: ['showTitle', 'message'],
  render() {
    return h('div', { class: 'container' }, [
      this.showTitle ? h('h1', null, '标题') : null,
      h('p', null, this.message)
    ])
  }
}

h 函数的优势在于它提供了更灵活的编程能力，特别是在处理复杂的条件逻辑和动态组件时。但对于简单的 UI 结构，模板语法通常更简洁易读。