Vue 3.0 渲染函数API
#概览此更改不会影响 <template> 用户。
以下是更改的简要总结：
h 现在全局导入，而不是作为参数传递给渲染函数
渲染函数参数更改为在有状态组件和函数组件之间更加一致
vnode 现在有一个扁平的 prop 结构
更多信息，请继续阅读！
#Render 函数参数
#2.x 语法
在 2.x 中，e render 函数将自动接收 h 函数 (它是 createElement 的常规别名) 作为参数：
// Vue 2 渲染函数示例
export default {
render(h) {
return h('div')
}
}
#3.x 语法
在 3.x 中，h 现在是全局导入的，而不是作为参数自动传递。
// Vue 3 渲染函数示例
import { h } from 'vue'
export default {
render() {
return h('div')
}
}
#渲染函数签名更改
#2.x 语法
在 2.x 中，render 函数自动接收诸如 h 之类的参数。
// Vue 2 渲染函数示例
export default {
render(h) {
return h('div')
}
}
#3.x 语法
在 3.x 中，由于 render 函数不再接收任何参数，它将主要用于 setup() 函数内部。这还有一个好处：可以访问作用域中声明的响应式状态和函数，以及传递给 setup() 的参数。
import { h, reactive } from 'vue'
export default {
setup(props, { slots, attrs, emit }) {
const state = reactive({
count: 0
})
function increment() {
state.count++
}
// 返回render函数
return () =>
h(
'div',
{
onClick: increment
},
state.count
)
}
}
有关 setup() 如何工作的详细信息，参考组合式 API 指南。
页:
[1]