Summary of how setup declares variables in vue3

When you write an application using Vue3,setup()Functions are a very important concept. In this function, you can declare variables, computed properties, and methods and expose them to component templates for use. This article will introduce Vue3setup()Several ways to declare variables in functions.

1. Use responsive variables

In Vue3, the responsive variable isref()andreactive()Function created.ref()Functions are used to create a single responsive variable, andreactive()Functions are used to create responsive objects with multiple attributes.

Here is an example showing how tosetup()Create a responsive variable in the function:

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    return {
      count
    };
  }
};

In the above code, we useref()Function to create acountand initialize it to0. Then, insetup()Return this variable to the template in the function.

When using this variable in a template, you need to use it.valueTo access the value of the variable:

<template>
  <div>Count: {{  }}</div>
</template>

2. Use normal variables

In addition to responsive variables, you can alsosetup()Normal variables are declared in the function. These variables are not automatically listened to, that is, when their values ​​change, the components are not automatically updated.

Here is an example showing how tosetup()Declare normal variables in the function:

export default {
  setup() {
    const name = 'John Doe';
    return {
      name
    };
  }
};

In the above code, we declare a name callednamenormal variable and initialize it to'John Doe'. Then, insetup()Return this variable to the template in the function.

When using this variable in a template, you can call it directly:

<template>
  <div>Name: {{ name }}</div>
</template>

3. Use Computational Properties

Calculate properties is a method of calculating new values ​​based on existing variables. In Vue3, you can usecomputed()Function to create computed properties.

Here is an example showing how tosetup()Create a computed property in the function:

import { ref, computed } from 'vue';
export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');
    const fullName = computed(() => {
      return `${} ${}`;
    });
    return {
      firstName,
      lastName,
      fullName
    };
  }
};

In the above code, we declare two responsive variablesfirstNameandlastName, and a computed propertyfullName, used according tofirstNameandlastNameThe value of calculating the full name.

When using these variables in a template, you need to use.valueTo access the value of the responsive variable, just call the computed attributes:

<template>
  <div>Full Name: {{ fullName }}</div>
</template>

To sum up, this is in Vue3setup()Several ways to declare variables in functions. I hope this article can help you better understand the development method of Vue3.

This is the end of this article about several methods of setting variable declaration in vue3. For more related content of vue3 setup declaration variables, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!