vue3中渲染函数的非兼容变更
渲染函数API变更
此更改不会影响到用户
h现在全局导入，而非作为参数传递给渲染函数- 渲染函数参数更改为在有状态组件和函数组件之间更加一致
- vnode现在又一个扁平的prop结构
Render函数参数
// 2.0 渲染函数
export default {
render(h) {
return h('div')
}
}
// 3.x语法
export default {
render() {
return h('div')
}
}渲染函数签名更改
// 2.x
export default {
render(h) {
return h('div')
}
}
// 3.x
import { h, reactive } from 'vue'
export default {
setup(prop, {slots, attrs, emit}) {
const state = reactive({
count: 0
})
function increment() {
state.count++
}
// 返回render函数
return () => h(
'div',
{
onClick: increment
},
state.count
)
}
}VNode Props 格式化
// 2.x
{
class: ['button', 'is-outlined'],
style: {color: '#fffff'},
attr: {id: 'submit'},
domProps: {innerHTML: ''},
on: {click: submitForm},
key: 'submit-button'
}
// 3.x VNode的结构是扁平的
{
class: ['button', 'is-outlined'],
style: { color: '#34495E' },
id: 'submit',
innerHTML: '',
onClick: submitForm,
key: 'submit-button'
}slot统一
更改了普通slot和作用域slot
this.$slots现在将slots作为函数公开- 移除
this.$scopedSlots
// 2.x
h(LayoutComponent, [
h('div', {slot: 'header'}, this.header),
h('div', {slot: 'header'}, this.header)
])
// 作用域slot：
// 3.x
h(LayoutComponent, {}, {
header: () => h('div', this.header),
content: () => h('div', this.content)
})
// 需要以编程方式引入作用域slot时，他们现在被统一在了$slots选项中
// 2.x的作用域slot
this.$scopedSlots.header
// 3.x的写法
this.$slots.header移除$listeners
$listeners对象在vue3中已经移除，现在事件监听器是$attrs的一部分
在vue2中，可以使用this.$attrs和this.$listeners分别访问传递给组件的attribute和时间监听器，结合inheritAttrs: false，开发者可以将这些attribute和监听器应用到其他元素，而不是根元素
在vue的虚拟DOM中，事件监听器现在只是以on为前缀的attribute，这样就成了$attrs对象的一部分，这样$listeners就被移除了
$attrs现在包括class和style
现在的$attr包含所有的attribute，包括class和style
在2.x中，虚拟dom会对class和style进行特殊处理，所以他们不包括在$attr中
在使用inheritAttr: false的时候会产生副作用
- $attrs 中的 attribute 不再自动添加到根元素中，而是由开发者决定在哪添加。
- 但是 class 和 style 不属于 $attrs，仍然会应用到组件的根元素：