Vue WatchEffect function creates advanced listeners

WatchEffect Advanced Listener

In Vue 3, we can usewatchEffectFunctions to create advanced listeners. andwatchandcomputeddifferent,watchEffectThere is no need to specify a dependency, it automatically tracks changes in responsive state and reruns when it changes.

Use the watchEffect function

Here is a simple example usingwatchEffectFunctions to listen for a responsive state and output a message when the state changes:

import { reactive, watchEffect } from 'vue';
const state = reactive({
  count: 0,
});
watchEffect(() =&gt; {
  (`Count is now: ${}`);
});
// Change the state, output Count is now: 1++;

In the example above, we usereactiveFunction to create a responsive objectstateand usewatchEffectFunction to create a listener.watchEffectThe function accepts a function as an argument, which is automatically run and uses responsive states there. This function is rerun when any of the responsive states change.

Stop listening

andwatchandcomputeddifferent,watchEffectThe function does not return a function that stops listening. If we need to stop listening, we canwatchEffectThe return value is set tonull,For example:

import { reactive, watchEffect } from 'vue';
const state = reactive({
  count: 0,
});
const stop = watchEffect(() =&gt; {
  (`Count is now: ${}`);
});
// Change the state, output Count is now: 1++;
// Stop listeningstop();

In the example above, we willwatchEffectThe return value is saved to a variablestop, and then call this function when you need to stop listening.

Listen to multiple states

If you need to listen for multiple responsive states, we canwatchEffectUse these states in the function and return a calculated value in the function, for example:

import { reactive, watchEffect } from 'vue';
const state = reactive({
  count1: 0,
  count2: 0,
});
watchEffect(() =&gt; {
  const sum = state.count1 + state.count2;
  (`Sum is now: ${sum}`);
});
// Change the state, output Sum is now: 1state.count1++;
// Change the state, output Sum is now: 3state.count2 += 2;

In the example above, we usereactiveFunction creates a responsive objectstate, and inwatchEffectUsed in the functionstate.count1andstate.count2Two responsive states, then the sum of these two states is calculated and the sum is output.

Lazy execution

andcomputedsimilar,watchEffectFunctions also support lazy evaluation. If we willwatchEffectThe second parameter is set to{ lazy: true }, then this function will be run only when the responsive state is accessed for the first time, for example:

import { reactive, watchEffect } from 'vue';
const state = reactive({
  count: 0,
});
watchEffect(
  () =&gt; {
    (`Count is now: ${}`);
  },
  { lazy: true }
);
// Access status, output Count is now: 1++;

In the example above, we willwatchEffectThe second parameter is set to{ lazy: true }, then accessed the responsive state in the code. At this time,watchEffectThe functions in the program will be run.

Summarize

watchEffectFunctions are a new feature in Vue 3 that can be used to create advanced listeners, automatically track changes in responsive states, and re-run when they change. andwatchandcomputeddifferent,watchEffectThere is no need to specify a dependency, it automatically tracks changes in responsive state. If you need to stop listening, we canwatchEffectThe return value is set tonull. If you need to listen for multiple responsive states, we canwatchEffectUse these states in the function and return a calculated value in the function.watchEffectFunctions also support lazy evaluation and can be run only when the responsive state is accessed for the first time.

This is the end of this article about creating advanced listeners by Vue WatchEffect function. For more related Vue WatchEffect content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!