What are the differences between computed and method in Vue?

This article will introduce to you the difference between computed and method in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. The two core differences between computed and method

In the official document, it is emphasized that the most important difference between computed and method is Two points

• computed is a property call, while methods are function calls

• computed has a caching function, but methods are not

OK, let’s look at a specific example

<!--HTML部分-->
<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>
<!--script部分-->
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        message: &#39;我是消息，&#39;
    },
    methods: {
        methodTest() {
            return this.message + &#39;现在我用的是methods&#39;
        }
    },
    computed: {
        computedTest() {
            return this.message + &#39;现在我用的是computed&#39;
        }
    }
})

2. Computed attribute call

Careful friends may have discovered it. In HTML interpolation

• we call the method defined by computed in the form of attribute access, {{computedTest}}

• but methods We must add () to call the defined method, such as {{methodTest()}}, otherwise, the view will appear test1, as shown in the figure below

3. The caching function of computed

First of all, we need to understand what the cache is used for?

Compared with everyone knows that HTTP caching, its core function is to reuse some resources that have not been updated on the server, avoid some unnecessary requests, and optimize the user experience

The same is true for computed Same:

In the above example, the methods defined by methods are accessed in the form of function calls, then test2-1, test2-2, test2-3 repeatedly run the methodTest method for three times. Again, if we encounter a scenario that requires 1,000 methodTest return values, then there is no doubt that this will inevitably cause a lot of waste.

What’s even more terrifying is that if you change the value of message, then these 1,000 Each methodTest method will be recalculated. . . .

Therefore, the official document repeatedly emphasizes that for any complex logic, you should use calculated properties

computed depends on the data in data, and only when its related dependent data changes

As in the above example, when Vue is instantiated, computed defines the computedTest method to do a calculation and return a value. In subsequent code writing, as long as the computedTest method depends on The message data does not change, and the computedTest method will not recalculate. That is to say, test3-1 and test3-2 get the return value directly, not the result of recalculation by the computedTest method.

The benefits of this are also obvious. Similarly, if we encounter a scenario that requires 1000 computedTest return values, then there is no doubt that this will greatly save memory compared to methods

Even if you change the value of message, computedTest will only be calculated once

4. Other instructions for computed

• computed In fact, it can be accessed both as an attribute and as a method.

• The origin of computed is an important reason, which is to prevent the logic in text interpolation from being too heavy and making it difficult to maintain

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommended: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of What are the differences between computed and method in Vue?. For more information, please follow other related articles on the PHP Chinese website!