Preface

This article is previously mentioned methods, computed, watch, filterto distinguish contrast, the corresponding instance is already mentioned in the previous article, if you have forgotten Kankan can review it!

methods

Everyone should use methods, which are method attributes in vue. When the data changes, the methods will be automatically executed as long as the methods in this are referenced. This attribute does not rely on caching. The most commonly used is also used in clickevent calls like click events, but many people ignore another { { }}use of methods , which is to use methods in:

<body>
<div id="app">
    <ul v-for="item in arrays">
        <li>{
   
   { obj[item] }}</li>
        <li>{
   
   {method(item)}}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
     
     
        el: '#app',
        data: {
     
     
            message: "",
            arrays:["A","B","C"],
            obj:{
     
     
                "A":"I am A",
                "B":"I am B",
                "C":"I am C"
            }
        },
        methods: {
     
     
            method(value){
     
     
                if(this.obj[value] != undefined)
                    return this.obj[value]
                else
                    return "没有匹配到！"
            }
        }
    })
</script>
</body>

Of course, this case can be <li>{ { obj[item] }}</li>solved directly . When the value of a loop in the template needs to be subjected to a certain logic operation, then you can use the methods method to pass in the corresponding value, and then calculate the result and return it to the template display. At this time, it is impossible to use computed. Parameters cannot be passed in computed, because the definition of computed is not a method, and it is also mentioned in the article about computing properties. In addition to this difference between methods and computed, the calculations in methods are not cached, that is, you will calculate as many times as you call them, and the relative cost of computed is larger.

computed

As the name implies, calculated attributes are used to calculate data attributes. In general, there are two major characteristics:

The attributes that the calculated attributes depend on must be responsive dependencies, otherwise the calculated attributes will not be executed;
Calculated attributes are cached based on dependencies, that is, when the dependencies are not updated, calling the calculated attributes will not recalculate, but directly call the data in the cache, which can reduce overhead.

Of course, the general understanding of computed can have the following two points:

Computed is used to monitor self-defined variables. The variable is not declared in data, but defined directly in computed, and then you can perform two-way data binding on the page to display the result or use it for other processing;
Computed is more suitable for processing multiple variables or objects and then returning a result value, that is to say, if a value of multiple variables changes, the value we monitor will also change, for example: the goods in the shopping cart The relationship between the list and the total amount. As long as the number of products in the product list changes, or the number of products is reduced, increased, or deleted, the total amount should change. The total amount here is the best choice to use the calculated attribute to calculate;
The calculated property has only getter (read-only) by default, and you can set the setter (write) by yourself when you need it.

watch

The listening attribute is specifically used to observe and respond to data changes on the vue instance. Basically, the calculated attribute can be used in scenarios that can use the watch attribute, and the computed attribute has low overhead and high performance. Therefore, if you can use the computed, use the computed attribute as much as possible. So is the watch attribute useless?

When performing asynchronous operations , you may have to use watch instead of computed. You can see the example on the official website: Ask a yes/no question and experience it online;
In addition to listening to the data attributes in data, watch can also monitor things that several other methods cannot, such as listening to routes '$route.path'. Other method attributes need at least a mountable DOM, while watch can listen directly.

filter

It is a filter attribute, which is similar to a method defined in methods. It is generally used for formatting (time, rounding, remainder, etc.). It is |separated by when it is used. If it is used multiple times, it will trigger execution.

to sum up

Relying on the computed caching mechanism, computed performance far exceeds other methods, so this is our first choice. When there are parameters to be passed, you can choose methods and filters, which one to use depends on the situation. If you listen to some elements that cannot be mounted to the DOM, such as routing, you can use watch to listen.

Vue Chapter 2-Comparative Analysis of Methods, Computed, Watch, Filter