Detailed examples of the difference between methods watch and computed in Vue.js

Preface

This article mainly briefly describes the difference between watch and computer in Vue, as well as methods

First of all, let's talk about the differences between these. Of course, they look different~~~,

Hahahaha, no more jokes, let’s get to the point.

introduce

methods: functions mounted on an object, usually the Vue instance itself or a Vue component

The computer: property looks like a method, but it is not. In Vue we generally use data to track changes to feature properties. Computed properties allow us to define a property that works the same way as data, but can also have some custom logic based on its dependencies. You could consider computed properties another view into your data.

watch: These can let you understand the Reactivity System. We provide some hooks to observe any property of the Vue store. If we want to add some functionality every time a change occurs, or respond to a specific change, we can observe a property and apply some logic. This means that the name of the observer must match what we observe.

These few sentences alone cannot explain the difference between the three. Let's take an example:

1. Mechanism of action

computed\watch:watch and computed are based on Vue's dependency tracking mechanism. They both try to deal with the following thing: when a certain data (called dependent data) changes, all the "related" data that depends on this data changes "automatically", that is, the related functions are automatically called to realize the data change.

methods: methods are used to define functions. Obviously, they need to be called manually to be executed. Unlike watch and computed, they do not "automatically execute" pre-defined functions.

[Summary]: The functions defined in methods need to be called actively, while the functions related to watch and computed will be called automatically to accomplish what we want.

2. From the nature

1. The function is defined in methods, and you obviously need to call it like "fuc()" (assuming the function is fuc).

2. computed is a calculated attribute, which is actually the same type as the data attribute in the data object (in terms of usage)

For example:

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

When you access it, use this.fullName to access it, just like accessing data (don’t call it as a function!!)

3. Watch: Similar to monitoring mechanism + event mechanism

For example:

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

The change of firstName is the condition for this special "event" to be triggered, and the function corresponding to firstName is equivalent to the method executed after the event occurs.

3. Comparison between watch and computed

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

watchcomputedOne data affects multiple dataOne data is affected by multiple data

4. Methods do not process data logic relationships, but only provide callable functions

Compared with watch/computed, methods do not handle data logic relationships, but only provide callable functions.

new Vue({
  el: '#app',
  template: '<div ><p>{{ say() }}</p></div>',
  methods: {
    say: function () {
      return 'I'm doing fine in a foreign country'
    }
  }
})

5. View the relationship between methods, watch and computed from the perspective of functional complementarity

In many cases, computed is used to handle situations that you cannot handle when using watch and methods, or that are not handled properly. Use computed to handle repeated calculations in methods.

1. The functions in methods are just a bunch of "honest boys". If another parent function calls it, it will "obediently" execute and return the results every time, even if these results are likely to be the same and are unnecessary.

2. Computed is a "scheming boy". It will be based on the dependency tracking system provided by Vue. As long as the dependent data has not changed, computed will not calculate again.

6. Use computed to handle the phenomenon of code redundancy in watch under certain circumstances and simplify the code

Summarize

computed

1. Computed property values ​​are cached by default. Computed properties are cached based on their responsive dependencies, that is, they are calculated based on the data declared in data.
2. If an attribute is calculated from other attributes, this attribute depends on other attributes, it is a many-to-one or one-to-one, generally use computed
3. If the attribute value of a computed property is a function, the get method is used by default; the return value of the function is the attribute value of the property; in computed, the property has a get method and a set method, and the set method is called when the data changes.
4. Computed properties are cached calculations based on dependencies and are updated only when needed.

watch

The monitoring function receives two parameters, the first parameter is the latest value; the second parameter is the value before input;

Well, this is the end of this article about the difference between methods watch and computed in vue.js. For more information about the difference between methods watch and computed in vue, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!