Découvrez watchEffect dans Vue3 dans un article et parlez de ses scénarios d'application !

Cet article vous fera découvrir watchEffect dans Vue3, présentera ses effets secondaires et parlera de ce qu'il peut faire. J'espère qu'il sera utile à tout le monde !

watchEffect, qui exécute immédiatement une fonction transmise tout en suivant de manière réactive ses dépendances et en réexécutant la fonction lorsque ses dépendances changent. (Partage de vidéos d'apprentissage : vue vidéo tutorielwatchEffect，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。（学习视频分享：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)

Dans d'autres En d'autres termes : watchEffect équivaut à fusionner la source de dépendance et la fonction de rappel de watch. Lorsqu'une dépendance réactive que vous utilisez est mise à jour, la fonction de rappel sera réexécutée. . Différent de watch, la fonction de rappel de watchEffect sera exécutée immédiatement (c'est-à-dire { immédiat : vrai )Cet article décrit principalement comment utiliser des Effets secondaires clairs rend notre code plus élégant~

effets secondaires de watchEffect

Quels sont les effets secondaires ( effet secondaire), en termes simples, un effet secondaire consiste à effectuer une certaine opération, telle que la modification de données ou de variables de variables externes, l'appel d'une interface externe, etc. La fonction de rappel de watchEffect est une fonction d'effet secondaire, car nous utilisons watchEffect pour effectuer certaines opérations après avoir écouté les modifications des dépendances.

🎜Lorsqu'une fonction d'effet secondaire est exécutée, elle aura inévitablement un certain impact sur le système. Par exemple, une minuterie setInterval est exécutée dans la fonction d'effet secondaire, nous devons donc gérer les effets secondaires. La fonction watchEffect de Vue3 qui écoute les effets secondaires peut recevoir une fonction onInvalidate comme paramètre d'entrée pour enregistrer un rappel lorsque le nettoyage échoue. Ce rappel d'invalidation sera déclenché lorsque les situations suivantes se produisent : 🎜

• Lorsque l'effet secondaire est sur le point d'être réexécuté (c'est-à-dire que la valeur de la dépendance change)
• L'écouteur est arrêté (en affichant la valeur de retour de l'appel Stop listening, ou stop listening est appelé implicitement lors de la désinstallation du composant)

rrreee🎜L'ordre dans lequel le code ci-dessus est imprimé est : 0 -> <code>exécuté onInvalidate, finalement exécuté -> 1🎜🎜Analyse : lors de l'initialisation, la valeur de count est imprimée en premier 0, puis en raison de la minuterie, mettez à jour la valeur de count à 1. À ce moment, l'effet secondaire sera à nouveau exécuté, donc. la fonction de rappel de onInvalidate sera déclenchée, imprimant et exécutant onInvalidate, puis exécute la fonction d'effet secondaire, imprimant la valeur 1 de compte. 🎜rrreee🎜Le code ci-dessus : lorsque nous exécutons explicitement la fonction stop pour arrêter l'écoute, la fonction de rappel de onInvalidate sera également déclenchée. De même, lorsque le composant sur lequel watchEffect est désinstallé appellera implicitement la fonction stop pour arrêter l'écoute, donc onInvalidate peut également être déclenchée. 🎜<h2 data-id="heading-2"><strong>application watchEffect</strong></h2>🎜 Utilise l'exécution non paresseuse de <code>watchEffect et le onInvalidate entrant Fonction, que peut-on faire ? 🎜🎜Scénario 1 : Habituellement, lorsque nous définissons une minuterie ou écoutons un événement, nous devons le définir ou l'enregistrer dans la fonction hook du cycle de vie monté, puis avant le Le composant est détruit, effacez le timer ou annulez la fonction d'écoute dans la fonction hook beforeUnmount. De cette manière, notre logique est dispersée en deux cycles de vie, ce qui n'est pas propice à la maintenance et à la lecture. 🎜🎜Si j'utilise watchEffect, la logique de création et de destruction est mise en place, et le code est plus élégant et plus facile à lire~🎜rrreee🎜Scénario 2 : Utiliser watchEffect pour Limitation anti-shake (comme l'annulation de demandes)🎜rrreee🎜......🎜🎜Bien sûr, watchEffect peut également faire beaucoup de choses, comme ouvrir un modal modifié fenêtre contextuelle. Si lorsqu'un changement dans id est détecté, nous pouvons réinitialiser les paramètres initiaux dans la fonction onInvalidate... Ceci n'est qu'une introduction, j'espère que tout le monde explorera davantage ~🎜🎜 (Vidéo d'apprentissage Partager : 🎜Développement web front-end🎜, 🎜Vidéo de programmation de base🎜)🎜

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!