How to use watchEffect listener in Vue3

watchEffect listener

Actually, I think this thing is useless, so don’t use it, hahahahaha!

How to put it, you can understand that the functions of watch and watchEffect are the same.

watch: Display the specified dependency source, and execute the callback function when the dependency source is updated.
watchEffect: Automatically collect dependency sources and re-execute itself when dependency sources are updated.

• watchEffect If it exists, the component will automatically execute itself once when it is initialized. There is no need to set it up for immediate execution like watch.

• watch After each callback, you can get the latest value and the last old value, but watchEffect cannot get it.

• watchEffect does not need to specify the properties to be monitored. It will automatically collect dependencies. As long as we use responsive properties in the callback, the callback will be executed after these properties are changed. No Like watch, it can only monitor specified properties.

• also needs to be introduced when using it.

• Remember, watch can replace watchEffect, but watchEffect cannot replace watch.

Summary: Don’t use watchEffect if you can use watch.

watchEffect listener usage

First we write a simple watchEffect listener.

<template>
  <div>
    <h2 id="name">{{name}}</h2>
    <button @click="btn">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("我是????????.");

    function btn() {
      name.value = "????????.";
    }

    const res = watchEffect(() => {
      console.log("watchEffect 执行了");
    });

    return { name, btn };
  }
};
</script>

Remember that watchEffect needs to be introduced first, otherwise it will be difficult to use. Then we save the above code, and then refresh the page to see the execution results.

We found that as soon as we refreshed the page, the console directly printed the content we output, so the watchEffect component will be executed as soon as it is loaded.

watchEffect monitors basic data

We see that when using watchEffect, there is no set parameter to monitor, only one callback function, because it will automatically collect dependencies, as long as we use it in the callback Responsive properties, then this callback will be executed after these properties are changed.

For example, when we monitor name.

<template>
  <div>
    <h2 id="name">{{name}}</h2>
    <button @click="btn">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("我是????????.");

    function btn() {
      name.value = "????????.";
    }

    const res = watchEffect(() => {
      console.log(name.value);
    });

    return { name, btn };
  }
};
</script>

We print the value of name in the callback function.

watchEffect Monitoring complex data

The above case is used to monitor a basic data. What if it monitors an object?

Actually, it’s the same.

<template>
  <div>
    <h2 id="boy-age">{{boy.age}}</h2>
    <button @click="boy.age++">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????????.",
      age: 10
    });

    const res = watchEffect(() => {
      console.log(boy.age);
    });

    return { boy };
  }
};
</script>

As for the above code, a button adds one to the age in the boy object each time it is clicked, and then monitors the new value of age

You can see that there is no problem at all!

When will watchEffect be executed?

As mentioned above, as long as we use responsive attributes in the callback, the callback will be executed after these attributes are changed, unlike watch which can only monitor. The specified attribute.

What does it mean? To understand it simply, if it is used in the callback, it will be executed. If it is not used, it will not be executed.

Just like the above case, when modifying age, we print age in the callback. If age is involved in the callback, it will be executed. If we do not use the changed age this time, we will only print In a word, let's see if we can execute the callback.

<template>
  <div>
    <h2 id="boy-age">{{boy.age}}</h2>
    <button @click="boy.age++">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????????.",
      age: 10
    });

    const res = watchEffect(() => {
      console.log("执行了");
    });

    return { boy };
  }
};
</script>

Refresh and save, click the button to modify the value of age, and see if the console prints the words executed.

Do you understand that sentence? Do you know when it was executed? OK.

Turn off watchEffect monitoring

Suppose we start using watchEffect monitoring, but what should I do if I don’t want it to monitor now? It's actually super simple.

    const res = watchEffect(() => {
      console.log(boy.age);
    });

Didn’t we create a watchEffect listener above? To close, you only need to call it once and it will be closed.

res()  // 关闭

Look at the specific code below.

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????????.",
      age: 10
    });

    const res = watchEffect(() =&gt; {
      console.log(boy.age);
    });

    res()  // 关闭监听

    return { boy };
  }
};
</script>

Save it and click the button to see the effect.

The above is the detailed content of How to use watchEffect listener in Vue3. For more information, please follow other related articles on the PHP Chinese website!