Comment utiliser l'écouteur watchEffect dans Vue3

watchEffect listening

En fait, je pense que ce truc est inutile, alors ne l'utilisez pas, hahahahaha !

Comment dire, vous pouvez comprendre que les fonctions de watch et watchEffect sont les mêmes.

watch : affiche la source de dépendance spécifiée et exécute la fonction de rappel lorsque la source de dépendance est mise à jour.
watchEffect : collecte automatiquement les sources de dépendance et se réexécute lorsque les sources de dépendance sont mises à jour. watch：显示指定依赖源，依赖源更新时执行回调函数。
watchEffect：自动收集依赖源，依赖源更新时候重新执行自身。

• watchEffect 如果存在的话，组件初始化的时候就会自动自行一次，不需要像 watch 一样设置立即执行。

• watch 每次回调之后是可以获取到最新值和上一次的老值，但是 watchEffect 是拿不到的。

• watchEffect 不需要指定监听的属性，他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。

• 使用的时候也是需要引入。

• 记住一点哈， watch 可以代替 watchEffect，但是 watchEffect 不能替代 watch。

总结：能用 watch 就不要用 watchEffect。

watchEffect 侦听器使用

首先我们写一个简单的 watchEffect 侦听器。

<template>
  <div>
    <h2>{{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>

记住 watchEffect 使用也是需要先引入的，不然不好使哈，然后我们保存上面的代码，然后刷新页面看一下执行结果。

我们发现哈，我们一刷新页面，控制台直接打印了我们输出的内容，所以说呢，watchEffect 组件一加载完就会执行。

watchEffect 监听基本数据

我们看到，watchEffect 使用的时候并没有设置监听哪个参数，只有一个回调函数，因为他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行。

比如我们监听 name 的情况。

<template>
  <div>
    <h2>{{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>

我们在回调函数打印一下 name 的值。

watchEffect 监听复杂数据

上面的案例是用来监听一个基本数据，如果监听一个对象呢？

其实也是一样的哈。

<template>
  <div>
    <h2>{{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>

上边代码呢，一个按钮，每次点击让 boy 对象里面的 age 加一操作，然后监听一下 age 的新值

可以看到是完全没有问题的哈！

watchEffect 啥时候执行

上边说过了哈，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。

啥意思呢，简单理解一下，就是回调里面使用了的话他就执行，没用他就不执行。

就像上面的案例，修改 age 的时候，我们在回调里面打印了 age，在回调里面涉及到 age 了，他就会执行，如果我们这次不使用改变的 age，只打印一句话，看一下能不能执行回调哈。

<template>
  <div>
    <h2>{{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>

刷新保存，点击按钮修改 age 的值，看一下控制台有没有打印 执行了

• watchEffect S'il existe, le composant s'exécutera automatiquement une fois lors de son initialisation. Il n'est pas nécessaire de le configurer immédiatement. exécution comme montre.

• watch Après chaque rappel, vous pouvez obtenir la dernière valeur et la dernière ancienne valeur, mais watchEffect ne peut pas l'obtenir.

• watchEffect n'a pas besoin de spécifier les attributs surveillés, il collectera automatiquement les dépendances. Tant que nous utilisons des attributs réactifs dans le rappel, ces attributs seront modifiés après le rappel. Exécution de rappel, contrairement à watch qui ne peut surveiller que les propriétés spécifiées.

• doit également être introduit lors de son utilisation.

• N'oubliez pas que watch peut remplacer watchEffect, mais watchEffect ne peut pas remplacer watch.

Résumé : N'utilisez pas watchEffect si vous pouvez utiliser watch.

utilisation de l'écouteur watchEffect#🎜🎜##🎜🎜#Nous écrivons d'abord un simple écouteur watchEffect. #🎜🎜#

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

#🎜🎜# N'oubliez pas que watchEffect doit être introduit en premier, sinon il sera difficile à utiliser. Ensuite, nous enregistrons le code ci-dessus, puis actualisons la page pour voir les résultats de l'exécution. #🎜🎜##🎜🎜#Nous avons constaté que dès que nous actualisons la page, la console imprime directement le contenu que nous produisons, donc le composant watchEffect sera exécuté dès qu'il sera chargé. #🎜🎜##🎜🎜#watchEffect surveille les données de base#🎜🎜##🎜🎜#Nous voyons que lorsque watchEffect est utilisé, il ne définit pas les paramètres à surveiller, seulement une fonction de rappel, car il collectera automatiquement les dépendances, comme tant que nous Si des propriétés réactives sont utilisées dans le rappel, le rappel sera exécuté une fois ces propriétés modifiées. #🎜🎜##🎜🎜#Par exemple, lorsque nous surveillons le nom. #🎜🎜#

res()  // 关闭

#🎜🎜#Nous imprimons la valeur du nom dans la fonction de rappel. #🎜🎜##🎜🎜#watchEffect Surveillance de données complexes #🎜🎜##🎜🎜#Le cas ci-dessus est utilisé pour surveiller une donnée de base. Et s'il surveillait un objet ? #🎜🎜##🎜🎜#En fait, c'est pareil. #🎜🎜#

<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>

#🎜🎜#Comme pour le code ci-dessus, un bouton en ajoute un à l'âge dans l'objet garçon à chaque fois que l'on clique dessus, puis surveille la nouvelle valeur de l'âge#🎜🎜##🎜🎜#Vous pouvez voir qu'il n'y a pas de problème ! #🎜🎜##🎜🎜#watchEffect Quand exécuter #🎜🎜##🎜🎜#Comme mentionné ci-dessus, tant que nous utilisons des attributs réactifs dans le rappel, ces attributs seront exécutés une fois le rappel modifié, contrairement à watch peut surveiller uniquement les propriétés spécifiées. #🎜🎜##🎜🎜#Qu'est-ce que cela signifie ? Pour le comprendre simplement, s'il est utilisé dans le callback, il sera exécuté. S'il n'est pas utilisé, il ne sera pas exécuté. #🎜🎜##🎜🎜#Tout comme le cas ci-dessus, lorsque nous modifions l'âge, nous imprimons l'âge dans le rappel. Si l'âge est impliqué dans le rappel, il sera exécuté si nous n'utilisons pas l'âge modifié. cette fois, imprimez simplement une phrase et voyez si le rappel peut être exécuté. #🎜🎜#rrreee#🎜🎜#Actualisez et enregistrez, cliquez sur le bouton pour modifier la valeur de l'âge, et voyez si les trois mots Exécuté sont imprimés sur la console. #🎜🎜##🎜🎜# Comprenez-vous cette phrase ? Savez-vous quand il a été exécuté ? D'ACCORD. #🎜🎜##🎜🎜#Désactiver la surveillance watchEffect#🎜🎜##🎜🎜#Supposons que nous commencions à utiliser la surveillance watchEffect, mais que dois-je faire si je ne veux pas qu'elle surveille maintenant ? C'est en fait super simple. #🎜🎜#rrreee#🎜🎜#N'avons-nous pas créé un écouteur watchEffect ci-dessus ? Pour fermer, il vous suffit de l'appeler une seule fois et il sera fermé. #🎜🎜#rrreee#🎜🎜#Voir le code spécifique ci-dessous. #🎜🎜#rrreee#🎜🎜#Enregistrez-le et cliquez sur le bouton pour voir l'effet. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!