详解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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。