渲染函数API变更
此更改不会影响到<template>用户
- h现在全局导入,而非作为参数传递给渲染函数
- 渲染函数参数更改为在有状态组件和函数组件之间更加一致
- vnode现在又一个扁平的prop结构
Render函数参数
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 2.0 渲染函数
export default {
render(h) {
return h( 'div' )
}
}
// 3.x语法
export default {
render() {
return h( 'div' )
}
}
|
渲染函数签名更改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
// 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
)
}
}
|
VNode Props 格式化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 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和作用域slot
- this.$slots现在将slots作为函数公开
- 移除this.$scopedSlots
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 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和监听器应用到其他元素,而不是根元素
1
2
3
4
5
6
7
8
9
10
|
< 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就被移除了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<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>
|
$attrs现在包括class和style
现在的$attr包含所有的attribute,包括class和style
在2.x中,虚拟dom会对class和style进行特殊处理,所以他们不包括在$attr中
在使用inheritAttr: false的时候会产生副作用
- $attrs 中的 attribute 不再自动添加到根元素中,而是由开发者决定在哪添加。
- 但是 class 和 style 不属于 $attrs,仍然会应用到组件的根元素:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
< 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 渲染函数非兼容变更的资料请关注服务器之家其它相关文章!
原文链接:https://segmentfault.com/a/1190000039376344