So verwenden Sie den watchEffect-Listener in Vue3

watchEffect listener

Eigentlich denke ich, dass dieses Ding nicht notwendig ist, hahahahaha!

Um es auszudrücken: Sie können verstehen, dass die Funktionen von watch und watchEffect gleich sind.

watch: Zeigt die angegebene Abhängigkeitsquelle an und führt die Rückruffunktion aus, wenn die Abhängigkeitsquelle aktualisiert wird.
watchEffect: Abhängigkeitsquellen automatisch sammeln und selbst erneut ausführen, wenn Abhängigkeitsquellen aktualisiert werden. 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 Wenn vorhanden, wird die Komponente bei der Initialisierung automatisch einmal ausgeführt. Es ist nicht erforderlich, sie so einzurichten, dass sie wie watch sofort ausgeführt wird.

• watch kann nach jedem Rückruf den neuesten Wert und den letzten alten Wert abrufen, watchEffect kann ihn jedoch nicht abrufen.

• watchEffect muss die zu überwachenden Eigenschaften nicht angeben. Solange wir im Rückruf reaktionsfähige Eigenschaften verwenden, wird der Rückruf im Gegensatz dazu ausgeführt Uhr, die nur bestimmte Eigenschaften überwachen kann.

• Es muss auch bei der Verwendung eingeführt werden.

• Denken Sie daran, dass watch watchEffect ersetzen kann, watchEffect jedoch nicht watch.

Zusammenfassung: Verwenden Sie watchEffect nicht, wenn Sie watch verwenden können.

Verwendung des WatchEffect-Listeners🎜🎜Zuerst schreiben wir einen einfachen WatchEffect-Listener. 🎜

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

🎜 Denken Sie daran, dass watchEffect zuerst eingeführt werden muss, da es sonst schwierig zu verwenden ist. Dann speichern wir den obigen Code und aktualisieren dann die Seite, um die Ausführungsergebnisse anzuzeigen. 🎜🎜Wir haben festgestellt, dass die Konsole den von uns ausgegebenen Inhalt direkt gedruckt hat, sobald wir die Seite aktualisiert haben, sodass die watchEffect-Komponente ausgeführt wird, sobald sie geladen wird. 🎜🎜watchEffect überwacht grundlegende Daten🎜🎜Wir sehen, dass es bei Verwendung von watchEffect keinen festgelegten Parameter zum Überwachen gibt, sondern nur eine Rückruffunktion, da Abhängigkeiten automatisch erfasst werden. Solange wir im Rückruf reaktionsfähige Attribute verwenden, sind diese Attribute dies Der Rückruf wird nach der Änderung ausgeführt. 🎜🎜Zum Beispiel, wenn wir Namen überwachen. 🎜

res()  // 关闭

🎜Wir geben den Wert von name in der Callback-Funktion aus. 🎜🎜watchEffect überwacht komplexe Daten🎜🎜Der obige Fall wird zur Überwachung grundlegender Daten verwendet. Was ist, wenn ein Objekt überwacht wird? 🎜🎜Eigentlich ist es dasselbe. 🎜

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

🎜Der obige Code ist eine Schaltfläche, die bei jedem Klicken eins zum Alter im Jungenobjekt hinzufügt und dann den neuen Wert des Alters überwacht. 🎜🎜Sie können sehen, dass es überhaupt kein Problem gibt! 🎜🎜Wann wird watchEffect ausgeführt? Solange wir im Rückruf reaktionsfähige Attribute verwenden, wird der Rückruf ausgeführt, nachdem diese Attribute geändert wurden, im Gegensatz zu watch, das nur die angegebenen Attribute überwachen kann. 🎜🎜Was bedeutet es einfach? Wenn es im Rückruf verwendet wird, wird es ausgeführt. Wenn es nicht verwendet wird, wird es nicht ausgeführt. 🎜🎜Genau wie im obigen Fall geben wir beim Ändern des Alters das Alter im Rückruf aus. Wenn das Alter im Rückruf enthalten ist, wird dieser ausgeführt. Wenn wir das geänderte Alter dieses Mal nicht verwenden, drucken wir nur einen Satz. Siehe Kann ich den Rückruf bald ausführen? 🎜rrreee🎜Aktualisieren und speichern, klicken Sie auf die Schaltfläche, um den Wert des Alters zu ändern, und prüfen Sie, ob die drei Wörter ausgeführt auf der Konsole gedruckt werden. 🎜🎜Verstehen Sie diesen Satz? Wissen Sie, wann es ausgeführt wurde? OK. 🎜🎜WatchEffect-Überwachung ausschalten🎜🎜Angenommen, wir beginnen mit der Verwendung von watchEffect-Überwachung, aber was soll ich tun, wenn ich nicht möchte, dass es jetzt überwacht? Es ist eigentlich super einfach. 🎜rrreee🎜Haben wir oben nicht einen watchEffect-Listener erstellt? Zum Schließen müssen Sie es nur einmal aufrufen und es wird geschlossen. 🎜rrreee🎜Siehe den spezifischen Code unten. 🎜rrreee🎜Speichern Sie es und klicken Sie auf die Schaltfläche, um den Effekt zu sehen. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den watchEffect-Listener in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!