vue避免重复渲染,
这篇文章主要介绍了详解vue3中渲染函数的非兼容变更，帮助大家更好的理解和学习使用某视频剪辑软件框架，感兴趣的朋友可以了解下
目录
渲染函数应用程序接口变更
提出函数参数渲染函数签名更改虚拟节点道具格式化狭槽统一
移除$听众
$attrs现在包括班级和风格
渲染函数API变更
此更改不会影响到模板用户
h现在全局导入，而非作为参数传递给渲染函数
渲染函数参数更改为在有状态组件和函数组件之间更加一致
虚拟节点现在又一个扁平的支柱结构
Render函数参数
//2.0 渲染函数
导出默认值{
渲染(h) {
返回h(div )
}
}
//3.x语法
导出默认值{
render() {
返回h(div )
}
}
渲染函数签名更改
//2.x
导出默认值{
渲染(h) {
返回h(div )
}
}
//3.x
从“vue”导入{ h，反应性}
导出默认值{
设置（道具，{插槽，属性，发射}) {
恒定状态=反应({
计数：0
})
函数增量(){
状态。计数
}
//返回提出函数
return ()=h(
div ，
{
onClick:增量
},
状态。计数
)
}
}
VNode Props 格式化
//2.x
{
class: [button ， is-outlined]，
样式：{color: #fffff}，
属性：{id:提交 },
domProps: {innerHTML: }，
位于：{点击：提交表单}，
按键："提交-按钮"
}
//3.x虚拟节点的结构是扁平的
{
class: [button ， is-outlined]，
样式：{ color: #34495E }，
id:"提交",
innerHTML:" "，
onClick: submitForm，
按键："提交-按钮"
}
slot统一
更改了普通狭槽和作用域狭槽
这个。$老虎机现在将时间作为函数公开
移除这个10.25美元scopedSlots
//2.x
h(布局组件，[
h(div ，{slot: header}，this.header)，
h(div ，{slot: header}，this.header)
])
//作用域插槽：
//3.x
h(布局组件，{},{
header: ()=h(div ，this.header)，
content: ()=h(div ，this.content)
})
//需要以编程方式引入作用域狭槽时，他们现在被统一在了$老虎机选项中
//2.x的作用域狭槽
这个scopedSlots.header
//3.x的写法
这个。$插槽。页眉
移除$listeners
$听众对象在vue3中已经移除，现在事件监听器是$attrs的一部分
在vue2中，可以使用这个。属性列表和这个。属性列表和这个。听众分别访问传递给组件的属性和时间监听器，结合继承者：假的，开发者可以将这些属性和监听器应用到其他元素，而不是根元素
模板
标签
输入类型= text v-bind= $ attrs v-on= $ listeners
/标签
/模板
脚本
导出默认值{
inheritAttrs: false
}
/脚本
在某视频剪辑软件的虚拟数字正射影像图中，事件监听器现在只是以在为前缀的属性，这样就成了属性列表对象的一部分，这样属性列表对象的一部分，这样听众就被移除了
模板
标签
输入类型=text v-bind=$attrs /
/标签
/模板
脚本
导出默认值{
inheritAttrs: false
}
//如果这个组件接收一个编号属性和一个v-on:关闭监听器，那么$attrs对象现在将如下所示
{
id:"我的输入",
onClose: ()=console.log(close事件已触发)
}
/脚本
$attrs现在包括class和style
现在的$属性包含所有的属性，包括班级和风格
在2.x中，虚拟数字正射影像图会对班级和风格进行特殊处理，所以他们不包括在$属性中
在使用inheritAttr: false的时候会产生副作用
$attrs中的属性不再自动添加到根元素中，而是由开发者决定在哪添加。
但是班级和风格不属于$attrs，仍然会应用到组件的根元素：
模板
标签
输入类型=text v-bind=$attrs /
/标签
/模板
脚本
导出默认值{
inheritAttrs: false
}
/脚本
！-写入-
我的组件id=我的id class=我的类/我的组件
！- vue2将生成-
label class=my-class
输入类型=text id=my-id /
/标签
！- vue3将生成-
标签
input type= text id= my-id class= my-class /
/标签
以上是vue3渲染函数不兼容改动的细节。更多关于vue渲染功能不兼容变化的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。