Detailed explanation of computed property functions in Vue documentation

Vue.js is a popular front-end framework that provides many functions and components that facilitate development. One of the very important features is the computed property function. Computed attributes can dynamically calculate a new attribute value based on data, avoiding the need to directly calculate complex expressions in the template. This article will introduce the calculated property functions in the Vue document in detail.

1. The definition and usage of computed properties

The computed property is a special property in Vue, and its value is a function. An example of defining a computed property in a Vue instance object:

var vm = new Vue({
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

In the above code, a computed property reversedMessage is defined in the Vue instance object, and its value is a function that returns is an inverted message.

Computed properties can be used in templates like data properties. For example:

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Reversed message: {{ reversedMessage }}</p>
</div>

When rendering, "Original message:" and "Reversed message:" will display "Hello World" respectively. and "dlroW olleH".

2. Cache of computed attributes

Computed attributes have a very important feature, which is to return the same output for the same input, so they are cached. For example, in the above example, using reversedMessage multiple times will return the same string as long as message has not changed.

This feature is very useful when using calculated properties in templates, because it avoids repeated calculation of complex expressions in the template.

3. Getters and setters of computed properties

In computed properties, the getter function is necessary, and it defines the output value of the computed property. In some cases, you may need to add a setter function that defines the input value of the computed property.

For example, we can define a computed property fullName, whose getter returns a string concatenated with firstName and lastName, and the setter can Separate the contents of fullName into firstName and lastName.

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      // Getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // Setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

In the above code, we can get the current full name through the getter of fullName, or set the new full name through the setter. For example:

console.log(vm.fullName) // John Doe

vm.fullName = 'Jane Smith'
console.log(vm.firstName) // Jane
console.log(vm.lastName) // Smith

4. Real-time calculation of calculated attributes

Computed attributes are the best method for real-time calculation of data attributes. After Vue changes the data attribute, it will calculate the value of the new calculated attribute the next time it needs to render the template. If the data the computed property depends on has not changed, the computed property will use the previously cached value.

var vm = new Vue({
  data: {
    radius: 5
  },
  computed: {
    diameter: function () {
      return this.radius * 2
    },
    circumference: function () {
      return 2 * Math.PI * this.radius
    }
  }
})

In the above code, we define a calculated property diameter and circumference, both of which depend on the radius property. These computed properties are recalculated when the radius property changes. For example:

console.log(vm.diameter) // 10

vm.radius = 10
console.log(vm.circumference) // 62.83185307179586

5. The difference between calculated properties and methods

In Vue, there is a very similar concept called a method, and the method can be used in the templatev-on directive to call. Both methods and computed properties can change their values ​​based on changes in data properties.

So what is the difference between methods and calculated properties?

First of all, unlike computed properties, methods are always recalculated and their results cannot be cached like computed properties. Methods are generally suitable for complex logic that needs to be recalculated each time or logic that requires passing in specific parameters.

Secondly, calculated properties only have getters, while methods only have setters. Although a method can return a value, the return value is not cached.

Finally, computed properties can be used in templates just as easily as data properties, while methods must be called using the v-on directive. If you want to display the value of a computed property in a template, using a computed property is a better choice.

6. Summary

In Vue, calculated properties are the best way to calculate data properties in real time. It has caching characteristics, avoids repeated calculations, can implement some complex business logic, and improves the readability and maintainability of the code. At the same time, calculated properties can also provide getter and setter functions, allowing us to freely operate calculated properties. Unlike calculated properties, methods are always recalculated, which is suitable for logic that needs to be recalculated every time or logic that needs to pass parameters. For logic that often requires calculations, it is recommended to use calculated properties.

The above is the detailed content of Detailed explanation of computed property functions in Vue documentation. For more information, please follow other related articles on the PHP Chinese website!