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

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

Setup is added to vue3 to solve the problem that it becomes difficult to understand and maintain components when the content of components is large. That is, after a lot of data, computed, methods, watch and other contents in vue, the data in the data of the same business logic and the methods in methods are "far apart" in the vue file. When looking at the code, you often need to search according to the data in data to find the corresponding methods method, and jump up and down to view the code, which is very inconvenient. In setup, the data in data and methods methods can be written in the adjacent location, which is easy to view and maintain.

1. Easy to use

Let's write down briefly to see the effect.

The author uses the newly built vue3 project here to modify it directly on App.vue.

{{name}} export default {setup () {return {name: "tearful eyes say nothing and fly red over the swing"}

The name originally written in data needs to be returned by return in setup

Running effect

2. Modify the variable value in setup

First take a look at the following code, and then talk about how to modify it in setup

{{name}} modify export default {setup () {let name = "tearful eyes ask the flowers to be silent, red fly over the swing" function change () {name = "Life has its own love delusion, does this hate have nothing to do with the wind and the moon"} return {name, change}

According to the general logic, modifying the name in setup will naturally write the above code.

But this code can not complete the modification of the name value, depending on the running effect

Why hasn't the name value changed? Because the name in the above code is non-responsive

If you want to change the name value, you need to change it to responsive, as follows

{{name}} modify import {ref} from 'vue'export default {setup () {let name = ref () function change () {name.value = "Life is infatuated with love, this hate has nothing to do with the wind and the moon"} return {name, change}.

Wrapping name with ref

Use variable name when modifying. syntax of value

Running effect

In addition to using ref, you can also use reactive, both of which can convert the original data type to a data type with responsive characteristics

What's the difference between ref and reactive? ref generally deals with basic types; reactive handles complex data types.

Reactive usage code

{{nameObj.name}} modify import {reactive} from 'vue'export default {setup () {let nameObj = reactive ({name:' this year is better than last year's bonus. It's a pity that next year's flowers will be better, knowing who to share with'}) function change () {nameObj.name = "far away from sorrow, as far away as spring water"} return {nameObj, change}

Running effect

3. Parent-child component communication in the form of setup

The code is written in setup form, and how to realize the communication between parent and child components is described below.

3.1. Father passes on son

Create a new Article.vue as a subcomponent under the components directory

Article.vue content

{{msg}} {{info}} export default {props: ['msg'], setup (props) {console.log (props.msg) return {info:props.msg}

Use props within the setup method to receive data from the parent component

App.vue is the parent component

Introducing Article.vue into App.vue

Import Article from'@ / components/Article.vue' export default {components: {Article}, setup () {return {name:'is getting farther and farther away and there is no book, where does the water sink? ask'}

Running effect

3.2, the child passes on the parent 3.2.1, and the child component calls the parent component method

Article.vue content

{{msg}} child component passes data to parent component export default {props: ['msg'], setup (props, content) {console.log (props.msg) function sendToParent () {content.emit (' change')} return {sendToParent}

Use emit in the content parameter of the setup method

App.vue content

Import Article from'@ / components/Article.vue' export default {components: {Article}, setup () {function changeName () {alert ('parent component event is called')} return {name: 'getting farther and farther away without a book, where does the water sink? changeName}

Running effect

3.2.2. The child component passes data to the parent component

The child component passes data to the parent component, and the parent component modifies the data

Article.vue content

The {{msg}} child component passes data to the parent component export default {props: ['msg'], setup (props, content) {console.log (props.msg) let newName =' after Qunfang, the West Lake is good, but the mess remains red. The flying catkins are full of gossip. Weeping willow diaphragm dry solar wind 'function sendToParent () {content.emit (' change', newName)} return {sendToParent}

App.vue content

Import Article from'@ / components/Article.vue' import {ref} from 'vue'export default {components: {Article}, setup () {let name = ref (' getting farther and farther away, where does the fish sink') function changeName (msg) {name.value = msg} return {name, changeName}

The name in App.vue needs to be modified, so use the ref wrapper

Running effect

4. Use lifecycle functions in setup

In setup, the lifecycle hook is preceded by "on" to access the component's lifecycle hook

Setup runs around beforeCreate and created lifecycle hooks, so you don't need to define them explicitly

Setup internal call lifecycle hook

Code example

Import {onBeforeMount, onMounted} from "vue" export default {setup () {onBeforeMount () = > {console.log ('onBeforeMount')}) onMounted () = > {console.log (' mouted')}) return {}

Running effect

After reading this, the article "how to use the setup of front-end vue3" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are 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.