详解vue3中渲染函数的非兼容变更
渲染函数API变更
此更改不会影响到用户
- h现在全局导入,而非作为参数传递给渲染函数
- 渲染函数参数更改为在有状态组件和函数组件之间更加一致
- vnode现在又一个扁平的prop结构
Render函数参数
//2.0渲染函数
exportdefault{
render(h){
returnh('div')
}
}
//3.x语法
exportdefault{
render(){
returnh('div')
}
}
渲染函数签名更改
//2.x
exportdefault{
render(h){
returnh('div')
}
}
//3.x
import{h,reactive}from'vue'
exportdefault{
setup(prop,{slots,attrs,emit}){
conststate=reactive({
count:0
})
functionincrement(){
state.count++
}
//返回render函数
return()=>h(
'div',
{
onClick:increment
},
state.count
)
}
}
VNodeProps格式化
//2.x
{
class:['button','is-outlined'],
style:{color:'#fffff'},
attr:{id:'submit'},
domProps:{innerHTML:''},
on:{click:submitForm},
key:'submit-button'
}
//3.xVNode的结构是扁平的
{
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.attrs和this.listeners分别访问传递给组件的attribute和时间监听器,结合inheritAttrs:false,开发者可以将这些attribute和监听器应用到其他元素,而不是根元素
在vue的虚拟DOM中,事件监听器现在只是以on为前缀的attribute,这样就成了attrs对象的一部分,这样attrs对象的一部分,这样listeners就被移除了
$attrs现在包括class和style
现在的$attr包含所有的attribute,包括class和style
在2.x中,虚拟dom会对class和style进行特殊处理,所以他们不包括在$attr中
在使用inheritAttr:false的时候会产生副作用
- $attrs中的attribute不再自动添加到根元素中,而是由开发者决定在哪添加。
- 但是class和style不属于$attrs,仍然会应用到组件的根元素:
以上就是详解vue3中渲染函数的非兼容变更的详细内容,更多关于vue渲染函数非兼容变更的资料请关注毛票票其它相关文章!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。