详解vue3中渲染函数的非兼容变更

渲染函数API变更

此更改不会影响到<template>用户

h现在全局导入，而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构Render函数参数

// 2.0 渲染函数export default { render(h) { return h(’div’) }}// 3.x语法export default { render() { return h(’div’) }}渲染函数签名更改

// 2.xexport default { render(h) { return h(’div’) }}// 3.ximport { 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 格式化

// 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

// 2.xh(LayoutComponent, [ h(’div’, {slot: ’header’}, this.header), h(’div’, {slot: ’header’}, this.header)])// 作用域slot：// 3.xh(LayoutComponent, {}, { header: () => h(’div’, this.header), content: () => h(’div’, this.content)})// 需要以编程方式引入作用域slot时，他们现在被统一在了$slots选项中// 2.x的作用域slotthis.$scopedSlots.header// 3.x的写法this.$slots.header移除$listeners

$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>$attrs现在包括class和style

现在的$attr包含所有的attribute，包括class和style

在2.x中，虚拟dom会对class和style进行特殊处理，所以他们不包括在$attr中在使用inheritAttr: false的时候会产生副作用

$attrs 中的 attribute 不再自动添加到根元素中，而是由开发者决定在哪添加。 但是 class 和 style 不属于 $attrs，仍然会应用到组件的根元素：

<template> <label> <input type='text' v-bind='$attrs' /> </label></template><script>export default { inheritAttrs: false}</script><!-- 写入 --><my-component class='my-class'></my-component><!-- vue2 将生成 --><label class='my-class'> <input type='text' /></label><!-- vue3 将生成 --><label> <input type='text' /></label>

以上就是详解vue3中渲染函数的非兼容变更的详细内容，更多关于vue 渲染函数非兼容变更的资料请关注好吧啦网其它相关文章！