渲染函数 API

---

注意

• h 现在全局导入，而不是作为参数传递给渲染函数
• 渲染函数参数在有状态组件和函数组件之间变得更加一致
• vnode 的 prop 结构扁平化

2.x 语法

render 函数会自动接收 h 函数(它是 createElement 的别名)作为参数:

export default {
	render(h) {
		return h('div', {
			class: ['button', 'is-outlined'],
			style: { color: '#34495E' },
			attrs: { id: 'incrementButton' },
			domProps: { innerHTML: '' },
			on: { click: increment },
			key: 'increment-button',
		})
	},
}

3.x 语法

render 函数不再接收任何参数，h 现在是全局导入的，而不是作为参数自动传递。

import { h, reactive } from 'vue'

export default {
	setup() {
		const state = reactive({
			count: 0,
		})

		function increment() {
			state.count++
		}

		// 返回render函数
		return () =>
			h(
				'div',
				{
					class: ['button', 'is-outlined'],
					style: { color: '#34495E' },
					id: 'incrementButton',
					// innerHTML: '',
					onClick: increment,
					key: 'increment-button',
				},
				state.count
			)
	},
}