How to use the setup function in vue3

This article mainly explains "how to use the setup function in vue3". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the setup function in vue3".

Overview

First acquaintance of setup function

What is used in the component: data, methods, etc., should be configured in setup, which means that data and methods written in Vue2 are no longer recommended here.

This configuration makes object programming closer to functional programming.

Export default {name: 'App', / / the most primitive object is written like this, but through es6 we can abbreviate / / setup: function () {} setup () {/ / data let name =' black cat 'let age = 20 / / method function sayHello () {console.log (`my name is ${name}, I have ${age} this year)}.

If you understand the principle of Vue2 response, you may wonder that name and age are not responsive in this place.

Indeed, here we are just testing whether data and methods can be put in setup, which will be described in a later column.

If you don't understand the response principle at this time, you can take a look at my previous article, which has a detailed introduction.

Second, the return value of setup

Just storing data and methods is not enough, we need to return them as return values so that they can be used directly in the template.

My name is {{name}}, and this year I {{age}} export default {name: 'App', / / the most original object is written like this, but through es6 we can abbreviate / / setup: function () {} setup () {/ / data let name =' black cat 'let age = 20 / / method function sayHello () {console.log (`my name is ${name}) I am ${age} this year. `)} return {name, age, sayHello}

Another return value of setup is also introduced in the overview, that is, a rendering function is returned, which is a bit like React.creatElement, which can customize the rendering content.

Import {h} from 'vue'export default {name:' App', setup () {/ / render an H2 tag return () = > h ('H2', 'black cat')} 3. Parameters about setup

# App.vue fishing # Demo.vueexport default {name:'Demo', props: ['msg'], setup (props,context) {console.log (props); console.log (context.attrs); console.log (context.slots); console.log (context.emit);}}

Thank you for reading, the above is the content of "how to use the setup function in vue3". After the study of this article, I believe you have a deeper understanding of how to use the setup function in vue3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!