Rendering API changesThis change will not affect <template> users
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 unificationChanged normal slots and scoped slots
// 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 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 styleNow $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
<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:
|
>>: How to Find the Execution Time of a Command or Process in Linux
This article example shares the specific code of ...
<br />Introduction: This idea came to me whe...
Table of contents Vue3 encapsulation message prom...
1. Common connections for mysql INNER JOIN (inner...
Table of contents 1. Introduction 1.1 Principle 1...
MySQL's MyISAM and InnoDB engines both use B+...
Hyperlink, also called "link". Hyperlin...
MySQL 5.7 and above versions provide direct query...
· 【Scene description】 After HTTP1.1, the HTTP pro...
This article shares the specific code of Vue to i...
I recently encountered a problem at work. The doc...
Table of contents 1. redo log (transaction log of...
Table of contents Preface 1. Monadic Judgment 1.1...
Table of contents 1. Deconstruction Tips 2. Digit...
This is an article about website usability. The a...