Detailed explanation of incompatible changes in rendering functions in Vue3

Detailed explanation of incompatible changes in rendering functions in Vue3

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:
  • Detailed explanation of the use of Vue rendering function render
  • Detailed explanation of Vue rendering function
  • How to use jsx syntax correctly in vue
  • Problems and solutions of using jsx syntax in React-vscode
  • Example of using JSX to build component Parser development
  • How to use JSX to implement Carousel components (front-end componentization)
  • Specific use of Vue component jsx syntax
  • Vue jsx usage guide and how to use jsx syntax in vue.js
  • Detailed explanation of how Vue supports JSX syntax
  • Rendering Function & JSX Details

<<:  Detailed graphic instructions for downloading and installing the unzipped version of MySQL 5.7.18 and starting the MySQL service

>>:  How to Find the Execution Time of a Command or Process in Linux

Recommend

Tutorial on installing MySQL 5.7.28 on CentOS 6.2 (mysql notes)

1. Environmental Preparation 1.MySQL installation...

JavaScript file loading and blocking issues: performance optimization case study

Let me start with a question: When writing an HTM...

Solution to forget password when installing MySQL on Linux/Mac

Preface This article mainly introduces the releva...

Sharing the structure and expression principles of simple web page layout

Introduction to structure and performance HTML st...

User experience analysis of facebook dating website design

<br />Related article: Analysis of Facebook&...

How to use border-image to implement text bubble border sample code

During the development activity, I encountered a ...

Detailed explanation of the use of Vue mixin

Table of contents Use of Vue mixin Data access in...

Vue implements graphic verification code

This article example shares the specific code of ...

Sample code for deploying ELK using Docker-compose

environment Host IP 192.168.0.9 Docker version 19...

The difference between MySQL execute, executeUpdate and executeQuery

The differences among execute, executeUpdate, and...

Sample code for partitioning and formatting a disk larger than 20TB on centos6

1. Server environment configuration: 1. Check dis...

CSS3 border effects

What is CSS# CSS (abbreviation of Cascading Style...

How to start a transaction in MySQL

Preface This article mainly introduces how to sta...

JS object copying (deep copy and shallow copy)

Table of contents 1. Shallow copy 1. Object.assig...