Detailed explanation of the computed function in Vue3: an application that facilitates the use of calculated properties

Vue is a very popular front-end development framework. It provides a very convenient and practical calculated attribute computed function. In Vue3, the computed function has also been upgraded and improved, making it easier to use and more efficient.

computed is first a function, which will return a value, which can be used directly in Vue's template. The special thing about the computed function is that its return value will dynamically change according to the data of the Vue instance it depends on, and the computed function is lazily evaluated. As long as the dependent data does not change, the computed function will not be evaluated. recalculate.

In Vue3, the computed function has been greatly improved. In the past, in Vue2, if you want to use the computed function, you must pass an object to the Vue instance. This object contains two methods: getter and setter. We need to calculate the required value in the getter method, and then update the other values ​​in the setter method. Responsive properties. It seems very tedious and prone to duplicate code and errors. In Vue3, we only need to perform calculations directly in the computed function, and Vue will automatically handle the updated logic for us.

For example, we have a Vue instance with the following data:

const vm = Vue.createApp({
  data() {
    return {
      firstName: '张',
      lastName: '三',
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName;
    }
  },
  template: `<div>{{fullName}}</div>`
}).mount('#app');

In this Vue instance, we have defined two responsive attributes firstName and lastName, which correspond to the two properties in the template. An input box in which the user can enter content. In the computed function, we define a fullName function, which returns the splicing result of firstName and lastName, which is the full name entered by the user. In the template, we use the fullName function directly.

In the above example, the computed function is very simple. It just performs a simple string concatenation, but all calculations are done in the computed function, not in the template. This not only makes the code clearer and easier to understand, but also improves performance because computed functions are only recomputed when the data changes.

In Vue3, the computed function also provides a new API, which allows us to define getter and setter methods in the computed function, so that we can calculate the required value in the getter method, and in the setter Data updates and notifications are performed in the method.

const vm = Vue.createApp({
  data() {
    return {
      firstName: '张',
      lastName: '三',
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  },
  template: `<div>
               <input v-model="fullName"/>
               {{fullName}}
             </div>`
}).mount('#app');

In this example, we define the fullName property in the computed function, which contains getters and setters methods. In the getter method, we calculate the value of fullName as in the previous example. In the setter method, we receive a parameter value, which is the fullName entered by the user. In the setter method, we split the fullName into firstName and lastName through spaces, and then assign them to the corresponding properties of the Vue instance. In this way, we can enter fullName in the input box, and then display the calculation results in the template through two-way binding.

To summarize, the computed function in Vue3 greatly simplifies the use of computed properties. We can complete all calculation and update logic directly in the computed function instead of manually defining getter and setter methods as before. This improvement not only makes the code more concise and understandable, but also improves computing efficiency and performance. If you are using Vue3, it is highly recommended that you use computed functions to calculate and process data.

The above is the detailed content of Detailed explanation of the computed function in Vue3: an application that facilitates the use of calculated properties. For more information, please follow other related articles on the PHP Chinese website!