The use, association and difference between computed and watch in the version

Preface

The previous article introduces the basic use of computed and watchDetailed explanation of the use of computed and watch

The difference between the two is to continue to understand the specific way through code implementation.

html

<li>The firstvaluevalue：{{ name }}</li>
<li>computed计算后的value：{{ computedName }}</li>
<li>
	watch修改后的value：{{ watchName }}
	<input type="text" v-model="watchName" />
</li>
<li><button @click="handleNumber">Modify the name</button></li>

JS

data() {
	return {
		name: "zhangsan",
		watchName: "Zhang San",
	};
},
watch: {
	watchName(newVal, oldVal) {
		("Old value---->", newVal);
		("New Value---->", oldVal);
		("All statuses under watch will be monitored---->", );
		(
			"All statuses under watch will be monitored---->",
			
		);
		 = newVal;
	},
},
computed: {
	computedName: function (currentThis) {
		(
			"When a state that is not related to the computed attribute changes, it will not be executed. As long as the dependency state changes, the cache will be updated.",
			currentThis
		);
		return `Depend onname，：${}`;
	},
},
methods: {
	handleNumber() {
		 = "lisi";
	},
},

the difference

Dependency value:computed depends on the state used, similar to the name declared in data,
The value listened in the watch does not depend on a certain value. As long as the component state changes, the value listened to get the latest value in real time.
The computered implementation uses getter and setter to get values, which is a synchronous operation.

How to use:

• Finally, computered needs to return the return value, and deeper getters and setters can be used. For details, please refer to Detailed explanation of the use of computed and watch
• In addition to the callback callback function, watch also has two attributes with boolean attribute values, which are used for the first binding of immediate and deep listening to the object
• The similarity between the two is that you can obtain new values ​​through method parameters and process related services in combination with other states.

Replenish

In the official documentation, in addition to the watch used in the components, there is also an introduction to the watch in the examples in the official documentation.

The specific usage can be found in the official website:

 /v2/api/#vm-watch

$watch basic usage – from official documentation example

Official documentation tips:

Notice:When changing (not replacing) an object or array, the old values ​​will be the same as the new values ​​because their reference points to the same object/array. Vue does not retain copies of the previous value changed.

vm.$watch('', function (newVal, oldVal) {
  // Do something})
// Functionvm.$watch(
  function () {
    // Expression ` + ` Each time a different result is obtained    // The processing functions will be called.    // It's like listening to an undefined computed property    return  + 
  },
  function (newVal, oldVal) {
    // Do something  }
)

It should be noted that if you use vm.$watch, then using unwatch will help us cancel listening to a certain state and reduce unnecessary listening and interaction overhead.

var unwatch = vm.$watch('a', cb)
// Cancel the observation laterunwatch()

Conclusion

I spent two spaces to introduce the usage methods of watch and computed, as well as the differences between these two hook functions. In actual enterprise project development, there are many scenarios and times used, so I try to write it as much as possible. At the same time, I also put the notes in the open source warehouse. I hope it will be helpful to everyone in the developed projects.

This is the end of this article about the use, connection and difference between computed and watch in the version. For more related computed and watch content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!