createVNode()
创建虚拟 DOM 节点
- 第一个参数:创建元素类型,必传
- 第二个参数:元素属性或者要传递的props
- 第三个参数:元素内容/子节点
render()
渲染虚拟 DOM 节点
- 第一个参数:要被渲染的虚拟DOM,必传
- 第二个参数:指定渲染的位置,必传
了解 h函数
官方文档: cn.vuejs.org/api/render-…
创建一个虚拟DOM节点(vnode)并渲染到页面,h 函数的底层实际上就是用 createVNode + render 实现的。
接收的参数类型
- 第一个参数:可以是一个字符串,也可以是一个Vue组件定义
- 第二个参数:元素属性或者要传递的props
- 第三个参数:元素内容/子节点
示例: 创建原生元素
import { h } from 'vue'
// 除了 type 外,其他参数都是可选的
h('div') h('div', { id: 'foo' })
// attribute 和 property 都可以用于 prop
// Vue 会自动选择正确的方式来分配它
h('div', { class: 'bar', innerHTML: 'hello' })
// class 与 style 可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })
// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })
// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')
// 没有 prop 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])
// children 数组可以同时包含 vnode 和字符串
h('div', ['hello', h('span', 'hello')])