Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use setup in vue3.0", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use setup in vue3.0" can help you solve your doubts.

In vue3.0, the setup function is the entry into the combined API to define data and parameters with the syntax "setup (props, {slots,attrs,emit}) {const name = 'name'return {name}}"; this function can only be synchronous, not asynchronous.

This article operating environment: windows10 system, Vue3 version, DELL G3 computer.

What is the use of setup in vue3.0

1. The characteristics and functions of setup function.

What is certain is that Vue3.0 is compatible with the Vue2.x version, which means that we can use Vue2.x syntax in Vue3 in our daily work, but when you really start to use Vue3 to write projects, you will find it much more convenient than Vue2.x.

A major characteristic function of Vue3-setup

1. The setup function is a function between the life cycle functions beforeCreate and Created, that is to say, the data and methods in data and methods cannot be used in the setup function.

2. The setup function is the entrance to Composition API (combined API).

3. The variables and methods defined in the setup function need to be return out in the end, otherwise they cannot be used in the template.

Second, the attention points of the setup function:

1. Since the Created lifecycle method has not been executed when the setup function is executed, 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, Vue directly modifies the this in the setup function to undefined in order to avoid our misuse.

3. Setup functions can only be synchronous, not asynchronous.

Usage 1: use in conjunction with ref

{{name}}

{{age}}

+ import {ref} from 'vue'export default {name:'app', data () {return {name:'xiaosan'}}, setup () {const name = ref (' Primary four') const age=ref (18) function plusOne () {age.value++ / / you must return .value} return {/ / to use name,age,plusOne}} if you want to change or get the value.

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 listening properties in watch

We need to set the event method in methods

You will find that Options APi dictates where we should do what we should do, which, to some extent, forces us to do code segmentation.

Now that we use Composition API, we no longer agree on this, so the code organization is very flexible, and our control code can be written in setup.

The setup function provides two arguments, props and context. The important thing is that there is no this in the setup function, and in vue3.0, accessing them becomes the following form: this.xxx= "context.xxx

We have no this context, no mandatory code separation of Options API. Composition API has given us a wider world, so we need to be more cautious about making appointments.

For complex logic code, we should pay more attention to the original intention of Composition API, do not be stingy with the use of Composition API to separate the code, used to cut into various modules for export.

Our expectation is as follows:

ImportuseAfrom'./a';importuseBfrom'./b';importuseCfrom'./c';exportdefault {setup (props) {let {arecast methodsA} = useA (); let {brecaine methodsB} = useA (); let {crecedence methodsC} = useC (); return {arecinct methodsBpenc methodsC}

Even if the amount of setup content code is getting larger and larger, it always revolves around the path of large, uncluttered and clear code structure.

After reading this, the article "how to use setup in vue3.0" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.