Explication détaillée de la fonction watchEffect dans Vue3 : utilisation approfondie de la réactivité de Vue3

Vue3 est actuellement l'un des frameworks les plus populaires dans le monde front-end, et sa dernière version a apporté des changements importants en termes de réactivité. Parmi eux, la fonction watchEffect est l'un des changements importants de Vue3. Cet article expliquera en détail la fonction watchEffect pour faciliter l'utilisation approfondie de la réactivité de Vue3.

Tout d’abord, nous devons comprendre ce qu’est la réactivité. De manière générale, la réactivité fait référence à un mécanisme qui met automatiquement à jour les vues associées lorsque les données changent. La réactivité dans Vue3 est implémentée via Proxy. Proxy est une nouvelle API dans ES6. Elle peut intercepter les opérations sur les objets et vérifier l'objet proxy, réalisant ainsi une fonctionnalité réactive.

Dans Vue3, la fonction watchEffect est l'une des clés pour atteindre la réactivité. La fonction watchEffect est une API simple mais puissante pour exécuter automatiquement des fonctions lorsque les dépendances changent. Il observe toutes les données réactives utilisées dans la fonction et réexécute automatiquement la fonction lorsque ces données changent.

Voici un exemple de base :

import {reactive, watchEffect} from 'vue'

const state = reactive({count: 0})

watchEffect(() => {
  console.log(state.count)
})

Dans l'exemple ci-dessus, nous avons créé un état d'objet réactif de base et surveillé les modifications de la propriété count via la fonction watchEffect. Lorsque l'attribut count change, la nouvelle valeur sera affichée sur la console.

Il convient de noter que la fonction watchEffect peut non seulement surveiller les changements de propriété de l'objet, mais également surveiller les changements du tableau. Lorsque les éléments d'un tableau changent, la fonction watchEffect sera également automatiquement réexécutée.

Ce qui suit est un exemple de tableau :

import {reactive, watchEffect} from 'vue'

const state = reactive({list: ['a', 'b', 'c']})

watchEffect(() => {
  console.log(state.list.join(','))
})

state.list.push('d')

Dans l'exemple ci-dessus, nous avons également surveillé les modifications dans l'objet réactif. Lorsqu'un nouvel élément est ajouté au tableau, la fonction watchEffect est réexécutée et le nouveau tableau est imprimé sur la console.

De plus, la fonction watchEffect peut également recevoir un objet de configuration comme deuxième paramètre. Cet objet peut spécifier les caractéristiques de la fonction watchEffect, comme par exemple si la fonction doit être exécutée immédiatement, etc. Dans l'exemple de code ci-dessous, nous créons un composant Vue doté d'un minuteur qui met à jour la page et met à jour le minuteur toutes les secondes.

<template>
  <div> {{ time }} </div>
</template>

<script>
  import {reactive, watchEffect} from 'vue'
  
  export default {
    setup() {
      const state = reactive({time: 0})
      
      const setTime = () => {
        setTimeout(() => {
          state.time++
        }, 1000)
      }
      
      watchEffect(setTime, { flush: 'sync' })
      
      return {time: state.time}
    }
  }
</script>

Dans le code ci-dessus, nous créons une minuterie et mettons à jour ses secondes dans un objet réactif à l'aide de la fonction watchEffect. Nous définissons également l'attribut flush de la fonction watchEffect sur "sync" pour garantir que l'observateur a été exécuté avant de mettre à jour le composant.

En bref, la fonction watchEffect est une fonction très importante du système réactif Vue3. Il peut surveiller automatiquement les modifications des données réactives et exécuter automatiquement les fonctions spécifiées lorsque les données changent. Lors du développement d'applications Vue3, nous devons avoir une compréhension approfondie de la fonction watchEffect afin d'utiliser la réactivité de Vue3 en profondeur.

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!