preface

Today, let’s take a look at the differences between Methods, computed and watch in VUE. Although this question is unclear, but it is necessary to grasp firmly ~

I. Basic explanation

1.computed

The calculation properties are mixed into the Vue instance, and the This context of all getters and setters is automatically bound to the Vue instance

2. methods

Methods will be blended into the Vue instance. These methods can be accessed directly from a VM instance or used in an instruction expression. Method this is automatically bound to a Vue instance.

3. watch

Observe and respond to changes in data on the Vue instance. An object, the key is the expression to observe, the value is the corresponding callback function, the value can also be the method name, or the object containing options. The Vue instance will call at instantiation time,$watch(), iterating through each property of the Watch object

Second, the loading sequence of the three

1. computed

Is performed immediately after the HTML DOM is loaded, such as assignment; (Attributes will be mixed into the Vue instance)

2. methods

There must be certain trigger conditions to execute, such as click events. What about watch? It is used to observe data changes on Vue instances.

3. When loading by default

Computed before watch, methods are not implemented;

4. After an event is triggered

First computed, then Methods, then Watch, computed properties vs. Method, computed properties are cached based on their dependencies

conclusion

Calculate attribute computed only when its associated depend on the change will only be evaluated again, when there is A performance overhead is larger computing properties. A, it need to traverse A great array and A large amount of calculation, then we may have other computing properties depends on A, by this time, we need to cache, do need to reload each time, Use methods when caching is not required