vue3中渲染函数的不兼容更改渲染函数API更改此更改不会影响用户h现在全局导入,而不是作为参数传递给渲染函数。Consistentvnode现在有一个扁平的prop结构Renderfunctionparameters//2.0renderfunctionexportdefault{render(h){returnh('div')}}//3.xsyntaxexportdefault{render(){returnh('div')}}渲染函数签名更改//2.xexportdefault{render(h){returnh('div')}}//3.ximport{h,reactive}from'vue'exportdefault{setup(prop,{slots,attrs,emit}){conststate=reactive({count:0})functionincrement(){state.count++}//返回渲染函数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的结构是flat{class:['button','is-outlined'],style:{color:'#34495E'},id:'submit',innerHTML:'',onClick:submitForm,键:'submit-bbutton'}slot更改了公共插槽和作用域插槽this.$slots现在将插槽公开为一个函数以删除this.$scopedSlots//2.xh(LayoutComponent,[h('div',{slot:'header'},this.header),h('div',{slot:'header'},this.header)])//Scopeslot://3.xh(LayoutComponent,{},{header:()=>h('div',this.header),content:()=>h('div',this.content)})//当您需要以编程方式引入作用域插槽时,它们现在统一在$slots选项中//2.xscopeslotthis.$scopedSlots.header//3.x写this.$slots.header去掉了$listeners$listeners对象在vue3中已经去掉了,现在事件监听器是$attrs,部分在vue2中,可以使用this.$attrs和this.$listeners分别访问传递给组件的属性和时间监听器,结合inheritAttrs:false,开发者可以将这些属性和监听器应用到其他元素而不是根元素在vue的虚拟DOM中,事件监听器现在只是以on为前缀的属性,它成为$attrs对象的一部分,因此$listeners被移除。$attrs现在包括类和样式$attr现在包括所有属性,包括类和样式在2.x中,虚拟dom将类和样式是经过特殊处理,因此它们不包含在$attr中。当使用inheritAttr:false时,会有副作用。$attrs中的属性不再自动添加到根元素,而是由开发人员决定添加到哪里。但是class和style不属于$attrs,仍然会应用到组件的根元素:
