How to call the calculated property method in vue

In Vue, a calculated property is a special property that can calculate a new property value based on the value of an existing property. In development, we usually define some properties that need to be calculated as calculated properties so that they can be used directly in templates, avoiding frequent logical calculations in JS code.

However, sometimes we need to call the calculated property method in the Vue component (instead of taking its value). How to achieve this? In this article, we will introduce several methods to achieve this requirement.

Directly call calculated properties

Computed properties in Vue components can be accessed like ordinary properties, so we can directly access calculations through this.Computed property name properties and thus the methods to use it. For example:

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
  }
}

In the above code, we define a fullName calculated property, and use this calculated property directly in the greet method to print out "Hello, last name name" string.

This method is very simple, but it should be noted that the method corresponding to the calculated attribute will not be automatically executed when the data changes. It needs to be called manually to obtain the latest calculation results.

Using the getter of the calculated property

In addition to directly calling the calculated property itself, you can also use the getter function of the calculated property. The getter function of a computed property will be automatically called when the property is accessed. Therefore, if we encapsulate the logic of the computed property in the getter function, we can call it where needed. function to obtain the calculation result. For example:

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    }
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
    // 调用计算属性的getter函数
    console.log('Hello, ' + this.fullName.get());
  }
}

In the above code, we use the getter function of the calculated attribute to obtain the calculation result, which is accessed through this.fullName.get(). Although this method requires more code than calling the calculated property directly, it can ensure that the latest calculation result can be obtained every time this.fullName.get() is called.

Use watch to monitor calculated properties

In addition to using the getter function, you can also use the watch function provided by Vue to monitor changes in calculated properties , thereby performing corresponding operations when the calculated attribute value changes. This method requires defining a listening function with the same name as the calculated property in watch, and passing the value of the calculated property as a parameter. For example:

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log('计算属性值从', oldVal, '变为', newVal);
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
  }
}

In the above code, we define a watch listening function with the same name as the calculated attribute to monitor changes in the calculated attribute value. When the value of the computed property changes, this function will be executed, so that the corresponding operations can be performed in the function.

It should be noted that the new value and old value of the calculated attribute can be obtained in the listening function, but do not modify the value of the calculated attribute in the listening function, otherwise it will cause a crash. cycle. Summary

The above introduces three implementation methods. In actual use, you can choose different methods according to specific scenarios. If you just want to simply get the value of the calculated property, you can directly call the calculated property itself; if you need to get the value of the calculated property multiple times in different methods, it is recommended to use the

getter

function of the calculated property; if you need to To perform some additional operations when the attribute value changes, you can use watch to monitor calculated properties. In general, when using a calculated property, it should be treated as an ordinary property, but the value of the calculated property needs to be calculated based on existing properties. If you need to use the method of calculating properties in a component, you can do so through the above three methods. You can choose the most appropriate method according to the specific scenario.

The above is the detailed content of How to call the calculated property method in vue. For more information, please follow other related articles on the PHP Chinese website!