Vue3 new features

One, foreword

I believe that XDJMM familiar with Vue2. X has also gradually started to use Vue3. X, or has been using Vue3. This article mainly introduces some new features of VUe3. x. For developers, vue3. x has little change from vue2. x and is mostly compatible with vue2. x. If you are new to Vue, start learning Vue 3.x directly.

New feature 1 && combined Api

You don’t have to think of it as an arcane, advanced thing; you can think of it as a hook function in a lifecycle (just for your convenience), but it’s not classified as a life hook function. It is named setup and accepts two parameters, props and context.

Why did you introduce composite Api Setup?

I believe that every iteration of the technology is not to fix some bug, it is to fix some pain point. Vue3.x is no exception. So what pain points does Setup solve?

  • The logical list is too long: We use optional apis (Mounted, Watch, computed, Created, updated…) when using vue2. x. Each time we write a logic, the logic’s concerns may be scattered across several optional apis, as shown in the following figure. Code blocks of the same color form the same logic. When the current component has more and more logical apis (Mounted, Watch, computed, Created, updated…) The code is gradually lengthened, and the same logic is scattered across a composite Api, resulting in “fragmentation” of the code logic. This is where the problem arises. This situation is inconvenient for us to develop, because we need to constantly “jump” to complete each piece of code development and its inconvenient; Eg. My personal problems with Vue2. X development are usually: When there is a lot of logic in the component, and the current development location is on methods (which requires values from some data), I usually have to scroll up a long way to data to find the variables I need to use (really annoying).
  • Poor structure: In Vue2. X the logic is not intuitive when we read code (especially code written by others), and we also need to “jump” between optional apis to complete the reading, which is very inconvenient.

Use of the combined Api “setup” :

The diagram below: The same functionality (listening for changes in two input fields and calculating the length of corresponding conditions, and calling related methods) is written using the Vue3 composite Api, and setup placeholders are placed at the same level as other optional apis. Watch, computed can be used in setup, but you need to introduce it beforehand on demand.

A few key points to use with Setup:

  • Setup runs around beforeCreate and Created lifecycle hooks (according to the official documentation setup is not included in the declaration cycle function);
  • Setup receives two parameters: props (the parent component passes the props value as a response, so the response will not work. ToRefs (props) can be used to deconstruct it if needed. Context (attrs, slots, emit);
  • This is not available in Setup (for reasons explained in article 1), which means that variable methods defined in other optional apis cannot be accessed in setup.
  • Reactive variables can be declared in setup;
  • Reactive variables can be declared in setup using ref and Reactive (both need to be introduced as needed). Ref is generally used as a basic data type. Reactive can only define reactive variables of complex types. Variables to be used in interpolation, combinatorial apis need to be explicitly returned in setup;
  • You can also use the life cycle functions in setup (beforeCreate and create are not necessary in setup for the same reason as in the first article). OnMounted, etc.

An example of using the props context to declare the period function in setup, and print the props context:

New feature 2 && Teleport

Teleport has the meaning of transmission, the main function is to mount a certain Dom element to a parent node;

Basic usage

New feature three && segments

In Vue2. X, each component can have only one root node. In Vue3.

Example: No error is reported for multiple root nodes

New feature 4 && emits option

emits is equivalent to the props option, and emits can be an array or an object; (Note: The official recommendation is to define all emitted events to better document how the component is supposed to work, although this can work without the emits option.)

For array emits

If native events are defined in emits (click below), native event listeners are replaced with events in the component

data(){ return {} }, emits:['myevent','click'], setup(){ }, methods:{ handle(){ this.$emit('myevent',payload); this.$emit('click',payload); }}Copy the code

Emits as an object

The emitted event can be authenticated when it is an object.

Data () {return {}}, emits: {click: null, / / no validation myevent: (= > {{a, b}) if (a > b) {return true; }else{ return false; } } }, methods:{ handle(){ this.$emit('myevent',{a,b}); this.$emit('click',{a,b}); }}Copy the code

Feature 5 some changes to the v-model directive

A single v-model instruction with no arguments

By default, the V-model directive is equivalent to modelValue as prop, update: modelValue as event;

<Child v-model='name' /> <! <Child :modelValue='name' @update:modelValue='val=>name=val' />Copy the code

V-model with parameters

V-model :[parameter] equivalent to [parameter] as prop, update:[parameter] as event;

<Child v-model:name='myName' /> <! Child: - equivalent to the -- -- > < name = 'myName' @ update: name = 'val = > myName = val' / >Copy the code

There can be more than one V-Model

<Child v-model:name='myName' v-model:age='myAge' /> <! <Child :name='myName' @update:name='val ':age='myAge' @update:age=' myAge' @update:age=' myAge' />Copy the code

V-model custom modifiers

The following defines a custom uppercase modifier. In subcomponents you can get the value of uppercase by defining the nameModifiers(prop + Modifiers) in props. The default is {uppercase:true}

<Child v-model:name.uppercase='myName' />

Copy the code
<! --> props:{nameValue:String, nameModifiers:{default:()=>({})}}, method:{ handle(){ console.log(this.nameModifiers) // {uppercase:true} } }Copy the code

V – model change

The V-model actually replaces the.sync modifier of the Vue2. X property