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

jQuery realizes the shuttle box effect

This article example shares the specific code of ...

Web design must have purpose, ideas, thoughts and persistence

<br />Introduction: This idea came to me whe...

mysql join query (left join, right join, inner join)

1. Common connections for mysql INNER JOIN (inner...

MySQL online DDL tool gh-ost principle analysis

Table of contents 1. Introduction 1.1 Principle 1...

A brief discussion on MySQL B-tree index and index optimization summary

MySQL's MyISAM and InnoDB engines both use B+...

Tutorial on using hyperlink tags in XHTML

Hyperlink, also called "link". Hyperlin...

MySQL query redundant indexes and unused index operations

MySQL 5.7 and above versions provide direct query...

How to maintain a long connection when using nginx reverse proxy

· 【Scene description】 After HTTP1.1, the HTTP pro...

Vue implements horizontal beveled bar chart

This article shares the specific code of Vue to i...

Solution to the Docker container being unable to access the host port

I recently encountered a problem at work. The doc...

Introduction to the three essential logs for MySQL database interviews

Table of contents 1. redo log (transaction log of...

An example of elegant writing of judgment in JavaScript

Table of contents Preface 1. Monadic Judgment 1.1...

Six weird and useful things about JavaScript

Table of contents 1. Deconstruction Tips 2. Digit...

43 Web Design Mistakes Web Designers Should Watch Out For

This is an article about website usability. The a...