渲染函数

渲染函数是 Vue 中用于编程式创建虚拟 DOM (vnode) 的方法，它比模板更加灵活，适用于复杂的动态渲染场景。

注意

Vue 3 与 Vue 2 在语法存在显著差异，本文以 Vue3为例，更多使用方法参考 Vue 官方文档: Vue3 | Vue2

基本用法

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

import { h } from 'vue'
const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
  /* children */
  ]
)

h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVNode()，但当你需要多次使用渲染函数时，一个简短的名字会更省力。

h() 函数的使用方式非常的灵活：

// 除了类型必填以外，其他的参数都是可选的
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')])

得到的 vnode 为如下形式：

const vnode = h('div', { id: 'foo' }, [])
vnode.type // 'div'
vnode.props // { id: 'foo' }
vnode.children // []
vnode.key // null

渲染函数 ​

渲染函数