在 Vue3 中，我们经常使用 template 来描述组件的结构和行为，但有时候我们可能需要在 [JavaScript]中编程式地生成组件的结构。为了满足这种動態需求，Vue3 提供了 h() 方法来渲染组件。

1.0 Parameter

import { h } from 'vue'

const vnode = h('div', { class: 'container' }, [
  h('h1', 'Hello, Vue3!'),
  h('p', 'This is a paragraph.')
])

我们使用 h() 方法创建了一个包含一个标题和一个段落的 div 元素

第一个参数是要创建的元素的标签名
第二个参数是元素的属性
第三个参数是元素的子元素列表。

2.0 Demo

import { h } from 'vue'

const App = {
  render() {
    return h('div', { class: 'container' }, [
      h('h1', 'Hello, Vue3!'),
      h('p', 'This is a paragraph.')
    ])
  }
}

export default App

3.0 詳細用法

3.1 创建元素

通过 h() 方法可以创建任意元素，只需提供元素的标签名作为第一个参数即可。

const vnode = h('div')

3.2 添加属性

可以通过第二个参数添加元素的属性，属性以对象的形式传入。

const vnode = h('div', { class: 'container', style: { color: 'red' } })

3.3 添加文本内容

可以通过在子元素列表中传入字符串来添加文本内容。

const vnode = h('div', 'Hello, Vue3!')

3.4 添加子元素

可以在子元素列表中传入其他 h() 调用的结果来添加子元素。例如：

const vnode = h('div', [
  h('h1', 'Hello, Vue3!'),
  h('p', 'This is a paragraph.')
])

3.5 注意事项

h() 方法的返回值是一个虚拟 DOM 对象，需要将其传递给 render 函数才能最终渲染到页面上。
在使用 h() 方法创建元素时，需要确保元素名称的正确性，否则会导致渲染失败。
使用 h() 方法创建元素时，可以通过第二个参数传递属性和事件监听器等，但事件监听器的绑定需要使用 on 前缀，如 onClick。
在 h() 方法中传递子元素时，可以是字符串、h() 调用的结果或者包含这些内容的数组。

【Vue3.x】h( )方法