Shulou(Shulou.com)06/02 Report--

What is the difference between computed and watch in Vue? for this question, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Let's get to know computed and watch in Vue, and introduce the difference between computed and watch.

1. Computed

1. Purpose: the calculated attribute is the calculated attribute

2. the benefits of calculating attributes: it can turn some attributes that are calculated based on other attributes into an attribute.

Computed has a dependency cache, and if the dependency properties of computed remain unchanged, then computed will not recalculate. If one data depends on other data, then design that data as computed.

Example (user name display):

Vue.config.productionTip = false;new Vue ({data: {user: {email: "jade@qq.com", nickname: "jade", phone: "18810661088"}}, computed: {displayName: {get () {const user = this.user; return user.nickname | | user.email | | user.phone }, set (value) {console.log (value); this.user.nickname = value;}, / / DRY don't repeat yourself / / use computed to calculate displayName template: `{{displayName}} {{displayName}} set`, methods: {add () {console.log ("add") This.displayName = "round";}). $mount ("# app")

3. Cache: if the dependent attribute does not change, the getter/setter will not be recalculated. By default, the cache will not be cached, and Vue has done special processing.

How do I cache it? You can refer to the following example:

2. Watch (monitoring / listening)

1. Purpose: when the data changes, execute a function. Watch is a function that perfectly realizes the historical function (method).

Example (undo):

Import Vue from "vue/dist/vue.js"; Vue.config.productionTip = false;new Vue ({data: {n: 0, history: [], inUndoMode: false}, watch: {n: function (newValue, oldValue) {console.log (this.inUndoMode); if (! this.inUndoMode) {this.history.push ({from: oldValue, to: newValue}) }, / / use computed to calculate displayName template: `{{n}} + 1 + 2-1-2 undo {{history}}`, methods: {add1 () {this.n + = 1;}, add2 () {this.n + = 2 }, minus1 () {this.n-= 1;}, minus2 () {this.n-= 2;}, undo () {const last = this.history.pop (); this.inUndoMode = true; console.log ("ha" + this.inUndoMode); const old = last.from; this.n = old / / the function of watch n will call this.$nextTick asynchronously (() = > {this.inUndoMode = false;});}). $mount ("# app")

With immediate: true added, watch will be triggered when rendering.

Vue.config.productionTip = false;new Vue ({data: {n: 0, obj: {a: "a"}}, template: `nroom1 obj.a + 'hi' obj = new object`, watch: {n () {console.log ("n changed");}, obj: {handler () {console.log ("obj changed") }, deep:true}, "obj.a": function () {console.log ("obj.a has changed");}). $mount ("# app")

Syntax 1:

The outer function of the arrow function above is in the global scope, and the this of the global scope is the global object window/global, so you can't get the this.n/this.xxx here, so the arrow function can never be used in watch.

Syntax 2:

Vm.$watch ('xxx',fn, {deep:...,immediate:...})

Watch is written with $before to avoid duplicating a data name called watch.

2. What does deep:true do?

If object.a changes, does object also change? if you need the answer is [also changed], use deep:true. If you need the answer is [no change], use deep:false.

Deep is not to look inside, to take a deep look, true is to look deep into, the default is false (only look at the address on the surface).

Not only to compare the address of obj, but also to compare any data in it that has changed, you should think that obj has changed.

III. Summary

Computed: it means to calculate an attribute.

Watch: it means to monitor

Watch supports asynchronous code while computed does not

When the value of computed is called, there is no need to add parentheses, it will be automatically cached according to the dependency, that is, if the dependency remains the same, the value of the computed will not be recalculated.

Watch has two options, the first is immediate, which means that the function should be rendered the first time it is executed, and the other is deep, which means that if we want to listen on an object, whether we want to see the changes in its properties.

If a data depends on other data, then design that data as computed

If you need to do something when a data changes, use watch to observe the changes in that data.

The answer to the question about what is the difference between computed and watch in Vue is shared here. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.