Quelle est la fonctionnalité watchEffect dans Vue3-Voir.js-php.cn

Quelle est la fonctionnalité watchEffect dans Vue3

WBOY

Libérer： 2023-05-20 11:58:22

avant

1514 Les gens l'ont consulté

watchEffect est une nouvelle fonctionnalité fournie dans Vue3, qui est utilisée pour surveiller les modifications des données réactives et exécuter la fonction de rappel spécifiée lorsque les données changent. watchEffect 是 Vue3 中提供的一个新特性，用于监听响应式数据的变化，并在数据发生变化时执行指定的回调函数。

与 Vue2 中的 watch 不同，watchEffect 不需要指定要监听的数据，而是会自动追踪函数中使用的响应式数据，并在这些数据发生变化时重新执行回调函数。这种自动追踪的特性可以简化代码，并提高应用的性能。

下面是一个使用 watchEffect 的示例：

import { watchEffect, reactive } from &#39;vue&#39;
const state = reactive({
  count: 0
})
watchEffect(() => {
  console.log(state.count)
})

Copier après la connexion

在上面的代码中，我们使用 reactive 函数创建了一个响应式对象 state，并使用 watchEffect 监听了 state.count 属性的变化。当 state.count 发生变化时，回调函数会被重新执行。

需要注意的是，watchEffect 返回一个无需停止的监听器函数。如果需要停止监听，可以调用这个监听器函数来停止监听。

除了监听响应式数据的变化外，watchEffect 还支持在回调函数中访问组件的上下文，例如 this 关键字和组件的计算属性等。

下面是一个使用 watchEffect 访问组件计算属性的示例：

import { watchEffect, computed } from &#39;vue&#39;
export default {
  computed: {
    doubleCount () {
      return this.count * 2
    }
  },
  mounted () {
    watchEffect(() => {
      console.log(this.doubleCount)
    })
  }
}

Copier après la connexion

在上面的代码中，我们使用 computed 函数创建了一个计算属性 doubleCount，并在 mounted 钩子函数中使用 watchEffect 监听了 doubleCount 的变化。当 doubleCount

Différent de watch dans Vue2, watchEffect n'a pas besoin de spécifier les données à surveiller, mais suivra automatiquement les données réactives utilisées dans la fonction et répondra lorsque ces données se produire La fonction de rappel est réexécutée en cas de changement. Cette fonctionnalité de suivi automatique peut simplifier le code et améliorer les performances des applications. 🎜🎜Voici un exemple d'utilisation de watchEffect : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la fonction reactive pour créer un objet réactif state , et utilisé watchEffect pour surveiller les modifications apportées à la propriété state.count. Lorsque state.count change, la fonction de rappel sera réexécutée. 🎜🎜Il est à noter que watchEffect renvoie une fonction d'écoute qui n'a pas besoin d'être arrêtée. Si vous devez arrêter d'écouter, vous pouvez appeler cette fonction d'écoute pour arrêter d'écouter. 🎜🎜En plus de surveiller les modifications des données réactives, watchEffect prend également en charge l'accès au contexte du composant dans la fonction de rappel, comme le mot-clé this et les propriétés calculées du composant. 🎜🎜Voici un exemple d'utilisation de watchEffect pour accéder à la propriété calculée d'un composant : 🎜rrreee🎜Dans le code ci-dessus, nous créons une propriété calculée doubleCount en utilisant le <code>calculé fonction , et utilisé watchEffect dans la fonction hook montée pour surveiller les changements dans doubleCount. Lorsque doubleCount change, la fonction de rappel sera réexécutée. 🎜

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!