Vue 建议在绝大多数情况下使用模板来构建应用程序。但是，在某些情况下，我们需要 JavaScript 的全部编程能力。这就是我们可以使用渲染功能的地方。

基本用法

创建虚拟节点。Vue 提供了一个h()创建虚拟节点的函数：

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' })

// attributes和properties均可在props中使用

// Vue 会自动选择正确的分配方式

h('div', { class: 'bar', innerHTML: 'hello' })

// 分别使用“.”和“^”前缀

// 添加 props 修饰符，如 .prop 和 .attr

h('div', { '.name': 'some-name', '^width': '100' })

// 与模板相同，class和style的值可以是对象或数组

h('div', { class: [foo, { bar }], style: { color: 'red' } })

// 事件侦听器应作为onXxx传递

h('div', { onClick: () => {} })

// 子元素可以是一个字符串

h('div', { id: 'foo' }, 'hello')

// 当没有props时可以省略props

h('div', 'hello')

h('div', [h('span', 'hello')])

// 子级数组可以包含虚拟节点和字符串

h('div', ['hello', h('span', 'hello')])

生成的虚拟节点具有以下形式：

const vnode = h('div', { id: 'foo' }, [])

vnode.type // 'div'

vnode.props // { id: 'foo' }

vnode.children // []

vnode.key // nullc

声明渲染函数

我们可以使用以下render选项声明渲染函数：

import { h } from 'vue'

export default {

data() {

return {

msg: 'hello'

}

},

render() {

return h('div', this.msg)

}

}

该render()函数可以通过 访问组件实例this。

除了返回单个虚拟节点之外，还可以返回字符串或数组：

export default {

render() {

return 'hello world!'

}

}

import { h } from 'vue'

export default {

render() {

// 使用数组返回多个根节点

return [h('div'), h('div'), h('div') ]

}

}

如果渲染函数组件不需要任何实例状态，也可以为简洁起见直接声明为函数：

function Hello() {

return 'hello world!'

}

这是一个有效的Vue组件。

虚拟节点必须是唯一的

组件树中的所有虚拟节点必须是唯一的。因此，以下渲染函数是无效的。

function render() {

const p = h('p', 'hi')

return h('div', [p, p])

}

如果想多次复制相同的元素/组件，可以使用工厂函数来实现。例如，下面的渲染函数是渲染 20 个相同段落的完全有效的方法：

function render() {

return h('div',

Array.from({ length: 20 }).map(() => {return h('p', 'hi')})

)

}