1. Characteristics and functions of the setup function
What is certain is that Vue3.0 is compatible, which means that we can use the relevant syntax in Vue3 in our daily work. But when you really start writing projects with Vue3, you will find that it is much more convenient than
A major feature function of Vue3 ---- setup
1. The setup function is a function between the two hook functions beforeCreate and Created. In other words, the data and methods in data and methods cannot be used in the setup function.
2. The setup function is the entry to the Composition API (combination API)
3. The variables and methods defined in the setup function need to be returned in the end, otherwise they will not be able to be used in the template.
2. Notes on the setup function：
1. Since the Created lifecycle method has not been executed when executing the setup function, the variables and methods of data and methods cannot be used in the setup function.
2. Since we cannot use data and methods in the setup function, in order to avoid our incorrect use, Vue directly changed this in the setup function to undefined
3. The setup function can only be synchronous and not asynchronous.
Usage 1: Use in combination with ref
<template>
<div >
{{name}}
<p>{{age}}</p>
<button @click="plusOne()">+</button>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name:'app',
data(){
return {
name:'xiaosan'
}
},
setup(){
const name =ref('Little Four')
const age=ref(18)
function plusOne(){
++ //If you want to change the value or get the value, you must.value }
return { // Must return to the template to use name,age,plusOne
}
}
}
</script>
Usage 2: Code segmentation
Options API and Composition API
Options API Convention:
We need to set the receiving parameters in props
We need to set variables in data
We need to set the calculation properties in computed
We need to set the listening attribute in the watch
We need to set event methods in methods
You will find that the Options API all agree on where we should do what, which to a certain extent forces us to perform code segmentation.
Now using the Composition API, there is no longer such agreement. Therefore, the code organization is very flexible, and our control code can be written in the setup.
The setup function provides two parameters props and context. The important thing is that this is gone in the setup function. In vue3.0, accessing them becomes the following form: =》
We have no this context, no forced code separation from the Options API. The Composition API gives us a broader world, so we need to be more cautious and self-confidence.
For complex logical code, we should pay more attention to the original intention of the Composition API, and do not be stingy with the use of Composition API to separate the code and use it to cut into various modules to export.
We expect this:
importuseAfrom'./a';
importuseBfrom'./b';
importuseCfrom'./c';
exportdefault{
setup (props) {
let{ a, methodsA } = useA();
let{ b, methodsB } = useA();
let{ c, methodsC } = useC();
return{
a,
methodsA,
b,
methodsB,
c,
methodsC
}
}
}
Even if the amount of code in the setup content becomes larger and larger, it always moves around a path of large but not messy and clear code structure.
This is all about this article about the use of setup in vue3.0. For more related content on vue3.0 setup, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!