Erfahren Sie in einem Artikel mehr über watchEffect in Vue3 und sprechen Sie über seine Anwendungsszenarien!

In diesem Artikel erfahren Sie mehr über watchEffect in Vue3, stellen seine Nebenwirkungen vor und sprechen darüber, was es bewirken kann. Ich hoffe, es wird für alle hilfreich sein!

watchEffect, der eine übergebene Funktion sofort ausführt, während er seine Abhängigkeiten reaktiv verfolgt und die Funktion erneut ausführt, wenn sich seine Abhängigkeiten ändern. (Teilen von Lernvideos: vue Video TutorialwatchEffect，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。（学习视频分享：vue视频教程）

换句话说：watchEffect相当于将watch 的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于 watch，watchEffect 的回调函数会被立即执行（即 { immediate: true }）

此文主要讲述怎样利用清除副作用使我们的代码更加优雅~

watchEffect的副作用

什么是副作用（side effect），简单的说副作用就是执行某种操作，如对外部可变数据或变量的修改，外部接口的调用等。watchEffect的回调函数就是一个副作用函数，因为我们使用watchEffect就是侦听到依赖的变化后执行某些操作。

当执行副作用函数时，它势必会对系统带来一些影响，如在副作用函数里执行了一个定时器setInterval，因此我们必须处理副作用。Vue3的watchEffect侦听副作用传入的函数可以接收一个 onInvalidate 函数作为入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：

• 副作用即将重新执行时（即依赖的值改变）
• 侦听器被停止 (通过显示调用返回值停止侦听，或组件被卸载时隐式调用了停止侦听)

import { watchEffect, ref } from 'vue'

const count = ref(0)
watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(()=> {
  count.value++
}, 1000)

上述代码打印的顺序为： 0 -> 执行了onInvalidate，最后执行 -> 1

分析：初始化时先打印count的值0， 然后由于定时器把count的值更新为1, 此时副作用即将重新执行，因此onInvalidate的回调函数会被触发，打印执行了onInvalidate，然后执行了副作用函数，打印count的值1。

import { watchEffect, ref } from 'vue'

const count = ref(0)
const stop = watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(()=> {
  stop()
}, 1000)

上述代码：当我们显示执行stop函数停止侦听，此时也会触发onInvalidate的回调函数。同样，watchEffect所在的组件被卸载时会隐式调用stop函数停止侦听，故也能触发onInvalidate的回调函数。

watchEffect的应用

利用watchEffect的非惰性执行，以及传入的onInvalidate 函数，我们可以做什么事情了？

场景一：平时我们定义一个定时器，或者监听某个事件，我们需要在mounted生命周期钩子函数内定义或者注册，然后组件销毁之前在beforeUnmount钩子函数里清除定时器或取消监听。这样做我们的逻辑被分散在两个生命周期，不利于维护和阅读。

如果我利用watchEffect，创造和销毁逻辑放在了一起，此时代码更加优雅易读~

// 定时器注册和销毁
watchEffect((onInvalidate) => {
  const timer = setInterval(()=> {
    // ...
  }, 1000)
  onInvalidate(() => clearInterval(timer))
})

const handleClick = () => {
 // ...
}
// dom的监听和取消监听
onMounted(()=>{
  watchEffect((onInvalidate) => {
    document.querySelector('.btn').addEventListener('click', handleClick, false)
    onInvalidate(() => document.querySelector('.btn').removeEventListener('click', handleClick))
  })
})

场景二：利用watchEffect作一个防抖节流（如取消请求）

const id = ref(13)
watchEffect(onInvalidate => {
   // 异步请求
  const token = performAsyncOperation(id.value)
  // 如果id频繁改变，会触发失效函数，取消之前的接口请求
  onInvalidate(() => {
    // id has changed or watcher is stopped.
    // invalidate previously pending async operation
    token.cancel()
  })
})

......

当然watchEffect还能做很多事情，比如打开一个修改的modal弹窗，如果检测到id变化，我们可以在onInvalidate)

Sonstiges Mit anderen Worten: watchEffect entspricht dem Zusammenführen der Abhängigkeitsquelle und der Rückruffunktion von watch. Wenn eine von Ihnen verwendete reaktionsfähige Abhängigkeit aktualisiert wird, wird die Rückruffunktion erneut ausgeführt . Im Gegensatz zu watch wird die Rückruffunktion von watchEffect sofort ausgeführt (d. h. { immediate: true )Dieser Artikel beschreibt hauptsächlich, wie das geht Die Verwendung von Nebenwirkungen löschen macht unseren Code eleganter~

Nebenwirkungen von watchEffect

Was sind Nebenwirkungen? ( Nebeneffekt), einfach ausgedrückt, besteht ein Nebeneffekt darin, einen bestimmten Vorgang auszuführen, z. B. die Änderung externer Variablendaten oder Variablen, den Aufruf einer externen Schnittstelle usw. Die Rückruffunktion von watchEffect ist eine Nebeneffektfunktion, da wir watchEffect verwenden, um bestimmte Vorgänge auszuführen, nachdem wir Änderungen in Abhängigkeiten abgehört haben.

🎜Wenn eine Nebeneffektfunktion ausgeführt wird, hat dies zwangsläufig Auswirkungen auf das System. Beispielsweise wird in der Nebeneffektfunktion ein Timer setInterval ausgeführt, sodass wir uns mit den Nebeneffekten befassen müssen. Die watchEffect-Funktion von Vue3, die auf Nebenwirkungen wartet, kann eine onInvalidate-Funktion als Eingabeparameter empfangen, um einen Rückruf zu registrieren, wenn die Bereinigung fehlschlägt. Dieser Invalidierungsrückruf wird ausgelöst, wenn die folgenden Situationen auftreten: 🎜

• Wenn der Nebeneffekt erneut ausgeführt werden soll (d. h. der Wert der Abhängigkeit ändert sich)
• Der Listener wird gestoppt (durch Anzeige des Rückgabewerts des Aufrufs „Stop Listening“ oder „Stop Listening“ wird implizit aufgerufen, wenn die Komponente deinstalliert wird)

rrreee🎜Die Reihenfolge, in der der obige Code gedruckt wird, ist: 0 -> <code>ausgeführt bei Invalidate, schließlich ausgeführt -> 1🎜🎜Analyse: Während der Initialisierung wird zuerst der Wert von count gedruckt 0, und dann aufgrund des Timers den Wert von count auf 1 aktualisieren. Zu diesem Zeitpunkt wird der Nebeneffekt erneut ausgeführt Die Rückruffunktion von onInvalidate wird ausgelöst, druckt und führt onInvalidate aus und führt dann die Nebeneffektfunktion aus, die den Wert 1 von zählen. 🎜rrreee🎜Der obige Code: Wenn wir die Funktion stop explizit ausführen, um das Abhören zu beenden, wird auch die Rückruffunktion von onInvalidate ausgelöst. Wenn die Komponente, in der watchEffect deinstalliert wird, implizit die Funktion stop aufruft, um das Abhören zu beenden, kann dies auch bei onInvalidate der Fall sein ausgelöst. 🎜<h2 data-id="heading-2"><strong>watchEffect-Anwendung</strong></h2>🎜 Nutzt die nicht verzögerte Ausführung von <code>watchEffect und den eingehenden onInvalidate Funktion, was können wir tun? 🎜🎜Szenario 1: Wenn wir einen Timer definieren oder auf ein Ereignis warten, müssen wir ihn normalerweise in der Life-Cycle-Hook-Funktion mount definieren oder registrieren und dann vor dem Die Komponente wird zerstört. Löschen Sie den Timer oder brechen Sie die Abhörfunktion in der Hook-Funktion beforeUnmount ab. Auf diese Weise ist unsere Logik auf zwei Lebenszyklen verteilt, was der Wartung und dem Lesen nicht förderlich ist. 🎜🎜Wenn ich watchEffect verwende, werden die Erstellungs- und Zerstörungslogik zusammengefügt und der Code ist eleganter und einfacher zu lesen~🎜rrreee🎜Szenario 2: Verwenden Sie watchEffect für Anti-Shake-Drosselung (wie das Abbrechen von Anfragen)🎜rrreee🎜......🎜🎜Natürlich kann watchEffect auch viele Dinge tun, wie zum Beispiel das Öffnen eines geänderten modal Popup-Fenster. Wenn wir die Änderung von id erkennen, können wir die Anfangsparameter in der Funktion onInvalidate zurücksetzen ... Dies ist nur eine Einführung, ich hoffe, das wird jeder tun Entdecken Sie mehr ~ 🎜🎜 (Lernvideo Teilen: 🎜Web-Front-End-Entwicklung🎜, 🎜Grundlegendes Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonErfahren Sie in einem Artikel mehr über watchEffect in Vue3 und sprechen Sie über seine Anwendungsszenarien!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!