We studied in the previous sectionBasic usage of watch listener, used to listen for changes in page data. So today, let’s learn about the watchEffect listener, the good brother of the watch listener. This is relatively simple and does not use a lot. Of course, you can decide to use it according to your own project situation. I won’t go into details about this, just go through it briefly.
watchEffect listener
Actually, I think this thing is a bad thing, it’s okay if you don’t need it, hahahahahaha!
How to say it, you can understand that the functions of the two things, watch and watchEffect, are the same.
watch: Displays the specified dependency source, and executes the callback function when the dependency source is updated.watchEffect: Automatically collect dependent sources, and re-execute themselves when dependent sources are updated.
- If it exists, the component will automatically be initialized once, and there is no need to set it up like the watch to execute immediately.
- After each callback, you can get the latest value and the old value of the last time, but watchEffect cannot be obtained.
- watchEffect does not need to specify the attributes to listen for, it will automatically collect dependencies. As long as we use responsive attributes in the callback, the callback will be executed after these attributes are changed, unlike watch that can only listen for specified attributes.
- It also needs to be introduced when using it.
- Remember one thing, watch can replace watchEffect, but watchEffect cannot replace watch.
Summary: If you can use watch, don’t use watchEffect.
watchEffect listener use
First we write a simple watchEffect listener.
<template>
<div>
<h1>{{name}}</h1>
<button @click="btn">Revisename</button>
</div>
</template>
<script>
import { ref, watchEffect } from "vue";
export default {
name: "App",
setup() {
const name = ref("I'm 𝒆𝒅.");
function btn() {
= "𝒆𝒅.";
}
const res = watchEffect(() => {
("watchEffect executed");
});
return { name, btn };
}
};
</script>Remember to use watchEffect first, otherwise it will not work. Then we save the above code and refresh the page to see the execution results.
We found that as soon as we refresh the page, the console directly prints the content we output, so the watchEffect component will be executed as soon as it is loaded.
watchEffect listens to basic data
We see that when using watchEffect, there is no parameter to listen to, there is only one callback function, because it will automatically collect dependencies. As long as we use responsive attributes in the callback, the callback will be executed after these attributes are changed.
For example, we listen to name.
<template>
<div>
<h1>{{name}}</h1>
<button @click="btn">Revisename</button>
</div>
</template>
<script>
import { ref, watchEffect } from "vue";
export default {
name: "App",
setup() {
const name = ref("I'm 𝒆𝒅.");
function btn() {
= "𝒆𝒅.";
}
const res = watchEffect(() => {
();
});
return { name, btn };
}
};
</script>We print the value of name in the callback function.
watchEffect listens to complex data
The above case is used to listen for a basic data. What if you listen for an object?
Actually, it's the same.
<template>
<div>
<h1>{{}}</h1>
<button @click="++">Revisename</button>
</div>
</template>
<script>
import { ref, watchEffect, reactive } from "vue";
export default {
name: "App",
setup() {
const boy = reactive({
name: "I'm 𝒆𝒅.",
age: 10
});
const res = watchEffect(() => {
();
});
return { boy };
}
};
</script>The above code is a button. Each time you click, add an operation to the age in the boy object, and then listen to the new value of age.
You can see that there is no problem at all!
When will the watchEffect be executed
As mentioned above, as long as we use responsive attributes in the callback, these attributes will be executed after the change, unlike watch that can only listen for specified attributes.
What does it mean? To understand it simply, if it is used in the callback, it will execute it, and if it is useless, it will not execute it.
Just like in the above case, when we modify age, we print age in the callback. When age is involved in the callback, it will execute it. If we do not use the changed age this time, we only print one sentence and see if we can execute the callback.
<template>
<div>
<h1>{{}}</h1>
<button @click="++">Revisename</button>
</div>
</template>
<script>
import { ref, watchEffect, reactive } from "vue";
export default {
name: "App",
setup() {
const boy = reactive({
name: "I'm 𝒆𝒅.",
age: 10
});
const res = watchEffect(() => {
("Execute");
});
return { boy };
}
};
</script>Refresh and save, click the button to modify the value of age, and see if the console prints.ExecuteThree words.
Do you understand that sentence? Do you know when it was executed? OK.
Close watchEffect listening
Suppose, we started using watchEffect listening, but what should I do if I don't want him to listen now? Actually super simple.
const res = watchEffect(() => {
();
});
Didn’t we create a watchEffect listener above? Close it only needs to be called and it will be closed.
res() // closure
Let's see the specific code below.
<template>
<div>
<h1>{{}}</h1>
<button @click="++">Revisename</button>
</div>
</template>
<script>
import { ref, watchEffect, reactive } from "vue";
export default {
name: "App",
setup() {
const boy = reactive({
name: "I'm 𝒆𝒅.",
age: 10
});
const res = watchEffect(() => {
();
});
res() // Turn off the monitoring
return { boy };
}
};
</script>Save it and click the button to see the effect.
Okay, the watchEffect listener has basically no problem, it's not difficult, so many people say, oh, this watchEffect is useless! It is indeed not very useful, but it is not absolutely true. Otherwise, the author would not have a whole watchEffect outside the watch, right! But you will know what the specific purpose is when you do the project! However, if you can solve it with watch, don’t use watchEffect!
This is the article about understanding the use of watchEffect listener in Vue3. For more related contents of Vue3 watchEffect listener, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!