Difference between Methods watch and computed in VUE

This article mainly describes the differences between Watch and computer in VUE, as well as methods

First of all, let’s say where these several differences are, of course, they look different ~~~, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha, ha.

introduce

• methods : A function mounted on an object, usuallyVue sample itself 或 Vue components
• Computer:Properties look like a method, but they are not, and in Vue we typically use Data to track changes to property properties. The compute property allows us to define an andThe data uses attributes in the same way, but you can also have some custom logic based on their dependencies. You can consider computing another view of properties into your data.
• Watch:These will give you an idea of the Reactivity System. We provide hooks to observe any properties Vue stores. If we want to add some functionality every time a change occurs, or respond to a particular change, we can look at a property and apply some logic. This means that the name of the observer must match what we observe.

It is impossible to tell the difference between the three.

I. Mechanism of action

1. computed\watch:watchandcomputedIt’s all in VueDependency trackingThey all try to deal with the fact that when a piece of data (called dependent data) changes, all the “related” data that depend on that dataChange automatically, that is,Automatically callRelated functions to implement changes in data.
2. methods:methodsIt’s used to define functions, and obviously it needs toManual callTo execute. Instead of “automating” pre-defined functions, as watch and computed do.

【 Summary 】 · Methods · Functions defined in methods need to be invoked actively, while functions related to Watch and computed are invoked automatically to perform the desired functions.

Two, from the nature

• Methods define functions, and you obviously need to call them like “fuc()” (assuming the function is fuc).
• 2. Computed is a calculation of attributes, and in fact is the same class as attributes in data objects (in use)
• Such as:

computed:{
   fullName: function () { return  this.firstName + lastName }
} 
Copy the code

• When you retrieve data, use this.fullName just as you would retrieve data (not as a function call!!).
• 3. Watch: similar to monitoring mechanism + event mechanism
• Such as:

watch: {
   firstName: function (val) {  this.fullName = val + this.lastName }
}
Copy the code

• A change in firstName is the condition for this particular “event” to be fired, and the function corresponding to firstName is the method that listens for the event to occur.

Iii. Comparison of Watch and computed Tomography

watch	computed
One data affects multiple data	One data is affected by multiple data

Methods do not deal with data logic and only provide callable functions

• In contrast to Watch /computed, methods does not deal with data logic and only provides callable functions

new Vue({
  el: '#app'.template: '<div id="app"><p>{{ say() }}</p></div>'.methods: {
    say: function () {
      return 'I'm fine in another place.'}}})Copy the code

5. Look at the relationship between Methods, Watch and computed from the perspective of complementary functions

• A lot of times, computed is used to deal with situations that you can’t deal with with Watch or methods, or that you don’t deal with properly
• Double counting with computed methods
• 1.methodsThe function inside is a bunch of “straight boys” that, if called by another parent function, will execute “obediently” every time and return results, even though those results are probably the same and unnecessary
• And 2.computedIs a “schemer Boy” based on the dependency tracking system provided by Vue, which does not perform computations again as long as the dependency data does not change

6. Use computed to deal with code redundancy of Watch in specific cases and simplify the code

conclusion

computed

1. Computed attribute values are cached by default, and computed attributes are cached based on their reactive dependencies, that is, computed based on data declared in data
2. If a property is computed by something else, that property depends on something else, it’s a many-to-one or one-to-one, usually computed
3. If the computed attribute value is a function, the default is to use the GET method; The return value of the function is the property value of the property; In computed, attributes have a GET and a set method, which are called when data changes.
4. Computed attributes are cached calculations based on dependencies and are updated only as needed.

watch

1. The listening function takes two arguments, the first of which is the latest value; The second argument is the value before input;