Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to use watch and watchEffect in vue3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First of all, summarize the difference between the two:

1, watch is lazy execution, but watchEffect is not, regardless of the third parameter configuration of watch, watch will not execute when the component is executed for the first time, only when the dependency changes later, while watchEffect executes immediately when the program is executed here, and then responds to its dependent change execution.

2. The two are used differently. Watch generally passes in two parameters, the first parameter is to indicate what state should trigger the listener to rerun, the second parameter defines the listener callback function, and the callback function can also accept two parameters, pointing to the values before and after the state change, so that we can see the changes before and after the state, but not in watchEffect And you can't define dependencies more specifically in the first parameter, as watch does.

3. Watch can only listen to the values defined by reactive and ref of responsive data. If you want to listen for a single value, you need to pass the getter function of the corresponding value. While watchEffect cannot listen to the values defined by reactive and ref, you can only listen to their corresponding specific values (it feels a bit roundabout, see the following code).

Here are some small experiments based on the third point above:

Watch:

1. Let watch and watchEffect listen on the values defined by reactive:

Watch:

Setup () {const state = reactive ({count: 0, attr: {name: ""}}); watch (state, (post, pre) = > {console.log (post); console.log (pre); console.log ("watch executed"); const clickEvent = () = > {state.count++;}; return {clickEvent};}

When the clickEvent event is triggered to change the value of state.count, we can see the following result from the console, indicating that watch responded to the change in state.count, but did not execute it initially.

WatchEffect:

Setup () {const state = reactive ({count: 0, attr: {name: ""}}); watchEffect (() = > {console.log ("watchEffect executed"); console.log (state);}); const clickEvent = () = > {state.count++;}; return {clickEvent};}

The clickEvent event is triggered by clicking the button several times, and the console result is as follows, indicating that watchEffect executes a callback when the component executes for the first time, but does not respond to changes in state.count after that.

Indicates that watch can listen on values defined by reactive, while watchEffect cannot.

2. Let watch and watchEffect listen to the values defined by ref.

Watch:

Setup () {const count = ref (0); watch (count, (post, pre) = > {console.log ("watch executed"); console.log (post); console.log (pre);}); const clickEvent = () = > {count.value++;}; return {clickEvent};}

Results:

WatchEffect:

Setup () {const count = ref (0); watchEffect (() = > {console.log ("watchEffect executed"); console.log (count);}); const clickEvent = () = > {count.value++;}; return {clickEvent};}

Results:

The result is the same as above, indicating that watch can respond to the values defined by ref, while watchEffect cannot.

2. Let watch and watchEffect respond to changes in a single value:

Watch:

Setup () {const state = reactive ({count: 0}); watch (state.count, (post, pre) = > {console.log ("watch executed"); console.log (post); console.log (pre);}); const clickEvent = () = > {state.count++;}; return {clickEvent};}

The results show that no matter how much the clickEvent event is triggered, the callback function in watch will not be triggered and nothing will be printed in the console.

WatchEffect:

Setup () {const state = reactive ({count: 0}); watchEffect (() = > {console.log ("watchEffect executed"); console.log (state.count);}); const clickEvent = () = > {state.count++;}; return {clickEvent};}

Console results:

It indicates that watchEffect can respond to a single value, but watch cannot. If you want watch to respond to the change of count, you need to pass the getter function to the first parameter, as follows:

Setup () {const state = reactive ({count: 0}); watch (() = > state.count, (post, pre) = > {console.log ("watch executed"); console.log (post); console.log (pre);}); const clickEvent = () = > {state.count++;}; return {clickEvent};}

If the getter function returns a state reference value, the reference value of state will not be modified when you change state.count, so it will not respond to the change of state.count. If you want to respond, you need to pass in the third parameter configuration {deep:true}, and the values of post and pre in the code are the same, as follows:

Setup () {const state = reactive ({count: 0}); / / will not respond to changes watch (() = > state, (post, pre) = > {console.log ("watch executed"); console.log (post); console.log (pre);}); const clickEvent = () = > {state.count++;} Return {clickEvent};} setup () {const state = reactive ({count: 0}); / / added {deep:true} to respond to changes watch (() = > state, (post, pre) = > {console.log ("watch executed"); console.log (post); console.log (pre) }, {deep:true}); const clickEvent = () = > {state.count++;}; return {clickEvent};}

If the reference value is returned, and you need to compare the different values before and after the change, you need to pass the getter function to return the value after a deep copy of the object. For the following example, an array is returned:

Setup () {const state = reactive ({count: 0}); const numbers = reactive ([0,1,2,3]); watch (() = > [... numbers], (post, pre) = > {console.log ("watch executed"); console.log (post); console.log (pre);}) Const clickEvent = () = > {numbers.push (1);}; return {clickEvent};}

Results of the console:

This is the end of the content of "how to use watch and watchEffect in vue3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.