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