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

Editor to share with you what watch and watchEffect in vue3 are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Watch conclusion 1:

Watch needs to listen to a specific data source, which can be one or more. It does not run the function when the page is first loaded, but only when the listening data source changes.

Conclusion 2

Watch listens to the properties of an object. First of all, the listening value should be passed and listened in the form of a function return value, which is different from that in the form of vue2, as follows: the object property is changed after 5 seconds, and the listening function prints.

Conclusion 3

To listen to multiple data sources is to put the parameters to be listened to in the array of the watch function, but if you are listening to multiple data sources, if multiple data sources change at the same time, the listening function will only be triggered once, as shown in the following figure.

This is when two data sources change at the same time, but the watch function is triggered only once.

WatchEffect conclusion 1

Vue official documentation to automatically apply and reapply side effects based on responsive status, we can use the watchEffect function. It immediately executes a function passed in, responsively tracks its dependencies, and reruns the function when its dependency changes.

You can see that the watchEffect function does not need to pass in a data source, only a function. Vue will track dependencies on the responsive data used in the function. When the data changes, the watchEffect function will run again, and watchEffect will run when the page loads for the first time.

Verify conclusion 1

Conclusion 2 watchEffect listens to multiple data sources

Listening object, unable to complete the monitoring

Monitor object properties, which can be completed

Conclusion 3 watchEffect stops listening to const stop= watchEffect (() = > {}) stop ()

The difference between watch and watchEffect

1.watch is lazy. The watch function is not triggered when the page is loaded for the first time, and the watch function is triggered only when the listening data changes.

2.watch can listen to multiple parameters in the form of an array. If multiple data changes at the same time, watch will only trigger once.

When 3.watch listens to reactive data, it is in the form of () = > a. The purpose is to listen to the getter function of the data. For the data defined by ref, you can listen directly.

4.watch can get the new and old values of the listening data

The 5.watchEffect function, which is triggered the first time the page is loaded, will always listen to the responsive data used internally, and watchEffect will run whenever the tracked responsive data changes

6.watchEffect can also monitor multiple parameters, but not the object, because it cannot monitor changes within the object. It may be that watchEffect cannot achieve in-depth monitoring (the specific reason is not clear) only record daily learning.

The above is all the content of the article "what are watch and watchEffect in vue3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.