Detailed explanation of incompatible changes in rendering functions in Vue3

Rendering API changes

Render function parameters
Render function signature changes
VNode Props Formatting

Slot unification

Removing $listeners

$attrs now includes class and style

Rendering API changes

This change will not affect <template> users

h is now imported globally instead of being passed as an argument to the render function
Render function parameters changed to be more consistent between stateful and function components
vnode now has a flat prop structure

Render function parameters

// 2.0 rendering function export default {
 render(h) {
  return h('div')
 }
}

// 3.x syntax export default {
 render() {
  return h('div')
 }
}

Render function signature changes

// 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++
  }
  // Return to render function return () => h(
   'div',
   {
    onClick: increment
   },
   state.count
  )
 }
}

VNode Props Formatting

// 2.x
{
 class: ['button', 'is-outlined'],
 style: {color: '#fffff'},
 attr: {id: 'submit'},
 domProps: {innerHTML: ''},
 on: {click: submitForm},
 key: 'submit-button'
}
// 3.x VNode structure is flat {
 class: ['button', 'is-outlined'],
 style: { color: '#34495E' },
 id: 'submit',
 innerHTML: '',
 onClick: submitForm,
 key: 'submit-button'
}

Slot unification

Changed normal slots and scoped slots

this.$slots now exposes slots as functions
Remove this.$scopedSlots

// 2.x
h(LayoutComponent, [
 h('div', {slot: 'header'}, this.header),
 h('div', {slot: 'header'}, this.header)
])
// Scope slot:


// 3.x
h(LayoutComponent, {}, {
 header: () => h('div', this.header),
 content: () => h('div', this.content)
})
// When you need to introduce scoped slots programmatically, they are now unified in the $slots option // 2.x scoped slots
this.$scopedSlots.header
// 3.x writing this.$slots.header

Removing $listeners

The $listeners object has been removed in vue3, and event listeners are now part of $attrs

In Vue2, you can use this.attrs and this.attrs and this.listeners to access the attributes and event listeners passed to the component respectively. Combined with inheritAttrs: false, developers can apply these attributes and listeners to other elements instead of the root element.

<template>
<label>
 <input type="text" v-bind="$attrs" v-on="$listeners">
</label>
</template>
<script>
 export default {
  inheritAttrs: false
 }
</script>

In Vue's virtual DOM, event listeners are now just attributes prefixed with on, making them part of the attrs object, so listeners are removed.

<template>
 <label>
  <input type="text" v-bind="$attrs" />
 </label>
</template>
<script>
export default {
 inheritAttrs: false
}
// If this component receives an id attribute and a v-on:close listener, the $attrs object will now look like this {
 id: 'my-input',
 onClose: () => console.log('close Event Triggered')
}
</script>

$attrs now includes class and style

Now $attr contains all attributes, including class and style

In 2.x, virtual DOM handles class and style specially, so they are not included in $attr, which will have side effects when using inheritAttr: false

Attributes in $attrs are no longer automatically added to the root element, but it is up to the developer to decide where to add them.
However, class and style do not belong to $attrs and will still be applied to the root element of the component:

<template>
 <label>
  <input type="text" v-bind="$attrs" />
 </label>
</template>
<script>
export default {
 inheritAttrs: false
}
</script>
<!-- Write -->
<my-component id="my-id" class="my-class"></my-component>
<!-- vue2 will generate -->
<label class="my-class">
 <input type="text" id="my-id" />
</label>
<!-- vue3 will generate -->
<label>
 <input type="text" id="my-id" class="my-class" />
</label>

The above is a detailed explanation of the incompatible changes of rendering functions in vue3. For more information about incompatible changes of vue rendering functions, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: