前言

Vue 提供了一个 h() 函数用于创建 vnodes。

h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。

const vnode = h('div', // type{ id: 'foo', class: 'bar' }, // propskey: '001', // key[/* children */]
)

【注意】组件树中的 vnodes 必须是唯一的。

一、h() 函数的基本使用方式

import { h } from 'vue'// 除了类型必填以外，其他的参数都是可选的
h('div')
h('div', { id: 'foo' })// attribute 和 property 都能在 prop 中书写
// Vue 会自动将它们分配到正确的位置
h('div', { class: 'bar', innerHTML: 'hello' })// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h('div', { '.name': 'some-name', '^width': '100' })// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')// 没有 props 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])// children 数组可以同时包含 vnodes 与字符串
h('div', ['hello', h('span', 'hello')])

二、h() 函数的进阶使用方式

1、条件渲染

h('div', [ok.value ? h('div', 'yes') : h('span', 'no')])

2、列表渲染

h('ul',// 假设‘items’是一个具有数组值的 refitems.value.map(({ id, text }) => {return h('li', { key: id }, text)})
)

3、事件

h('button',{onClick: (event) => {},// 对于事件和按键修饰符，可以使用 withModifiers 函数onDbclick: withModifiers(() => {}, ['stop'])},'click me'
)

4、使用插槽

import { h } from 'vue'const vnode = h('SelfComponent',// 默认插槽：// <div><slot /></div>// <div>{slots.default()}</div>h('div', slots.default()),// 具名插槽// <div><slot name="footer" :text="message" /></div>// <div>{slots.footer({ text: props.message })}</div>h('div',slots.footer({text: props.message}))
)

【参考文章】
vue 官网之“渲染函数 & JSX”