How vue uses computed instead of watch

This article will explain in detail how vue uses computed instead of watch. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Use computed instead of watch

In many cases, the abuse of watch on a page can lead to a series of problems, and it is usually better to use the computed attribute, which needs to be distinguished first:

Watch: automatically executes the corresponding callback function when the monitored attribute changes

Computed: calculated properties are only re-evaluated when their dependencies change

In fact, they are different in function, but sometimes the same effect can be achieved, and computed will be better, such as:

{{fullName}} {{fullName2}} export default {data () {reurn {firstName:', lastName:', fullName2:''}, / / use computed computed: {fullName () {return this.firstName +'+ this.lastName}}, / / use watch watch: {firstName: function (newVal, oldVal) {this.fullName2 = newVal +''+ this.lastName }, lastName: function (newVal, oldVal) {this.fullName2 = this.firstName +'+ newVal;},}}

As we can see from the comparison above, it makes more sense to use computed in the case of dealing with multiple data interactions.

Computed monitors the dependent value. If the dependent value is unchanged, it will directly read the cache for reuse, and then recalculate when it changes. Watch monitors the attribute value, and whenever the attribute value changes, it will trigger the callback function to perform a series of operations.

This is the end of this article on "how vue uses computed instead of watch". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.