目录渲染函数api变更 Render函数参数 渲染函数签名更改Vnode Props 格式化slot统一 移除$listeners $attrs现在包括class和styl
此更改不会影响到<template>用户
// 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
)
}
}
// 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
// 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
对象在vue3中已经移除,现在事件监听器是$attrs
的一部分
在vue2中,可以使用this.attrs和this.attrs和this.listeners分别访问传递给组件的attribute和时间监听器,结合inheritAttrs: false,开发者可以将这些attribute和监听器应用到其他元素,而不是根元素
<template>
<label>
<input type="text" v-bind="$attrs" v-on="$listeners">
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
在vue的虚拟DOM中,事件监听器现在只是以on为前缀的attribute,这样就成了attrs对象的一部分,这样attrs对象的一部分,这样listeners就被移除了
<template>
<label>
<input type="text" v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
// 如果这个组件接收一个 id attribute 和一个 v-on:close 监听器,那么 $attrs 对象现在将如下所示
{
id: 'my-input',
onClose: () => console.log('close Event Triggered')
}
</script>
现在的$attr包含所有的attribute,包括class和style
在2.x中,虚拟dom会对class和style进行特殊处理,所以他们不包括在$attr中
在使用inheritAttr: false的时候会产生副作用
<template>
<label>
<input type="text" v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
<!-- 写入 -->
<my-component id="my-id" class="my-class"></my-component>
<!-- vue2 将生成 -->
<label class="my-class">
<input type="text" id="my-id" />
</label>
<!-- vue3 将生成 -->
<label>
<input type="text" id="my-id" class="my-class" />
</label>
以上就是详解vue3中渲染函数的非兼容变更的详细内容,更多关于vue 渲染函数非兼容变更的资料请关注编程网其它相关文章!
--结束END--
本文标题: 详解vue3中渲染函数的非兼容变更
本文链接: https://www.lsjlt.com/news/121349.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0