Detailed explanation of computed function in Vue documentation

Vue.js is a popular JavaScript front-end framework. It can easily realize the connection between HTML and JavaScript, thereby improving the performance of web applications. There is a function called computed in the Vue.js framework. Its main purpose is to perform responsive calculations and formula operations on page data. Next, let us explain this function in detail.

What is computed function?

computedThe function is a very important function in Vue.js. Its function is to calculate properties. Computed properties can perform data processing on other properties and return new data. computedThe function depends on the data defined in the data object. When these data change, the code inside the computedfunction will be automatically updated.

We can regard the computed function as a reactive data in Vue, because it also has responsive characteristics. Computed properties are automatically recalculated when their dependent data changes.

Grammar

computedThe syntax of the function is very simple:

computed: {
    计算属性名字: function() {
        //return 你要计算的值
    }
}

Here we need to use a keyword computed, in which It is followed by an object containing one or more computed properties. Computed attribute names are names defined by ourselves (can be understood as variable names), and their return values ​​are our calculation results. What needs to be noted here is that do not manually change other data data in the method of calculating attributes, because this will cause an infinite loop.

Example

In order to help everyone better understand the computed function, let’s look at an example below.

<div id="app">
    <input v-model="message" />
    <p>{{ reversedMessage }}</p>
</div>

We define an input box and a paragraph tag in the template. The content in the input box is bound to the message data in data through the v-model directive. At the same time, we defined a calculated attribute reversedMessage, which returns the reverse order of message data. The following is the complete JavaScript code:

var app = new Vue({
    el: '#app',
    data: {
        message: ''
    },
    computed: {
        reversedMessage: function() {
            return this.message.split('').reverse().join('')
        }
    }
})

The reversedMessage method in the computed function in this example is used to calculate the message reverse order result. When we enter information in the input box, the reversedMessage method will automatically be triggered to update. This is because the reversedMessage method relies on the message data in data. As long as the data changes, the reversedMessage method will automatically refresh the page.

Advantages of computed function

computedThe function mainly has the following advantages:

1. Save code: when using computedIn the case of functions, we can complete the update and calculation of data without writing too much code.

2. Improve performance: computedThe calculation results of the function will be cached, and will only be recalculated when the data it depends on changes.

3. Concise code: Since the computed function automatically detects data changes, we do not need to specify the dependent data of the calculated attribute in advance. This greatly simplifies our code.

Summary

computedFunction is a very useful data value method in Vue.js. It allows us to calculate and update data more conveniently, and has great advantages in terms of code simplicity and performance. If you are a newbie to Vue.js, it is recommended to first master the use of computed functions when learning the Vue.js framework.

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