Comment émettre automatiquement des requêtes lorsque les données changent dans Vue3

Une solution consiste à utiliser la fonction watchEffect fournie dans Vue 3. Cette fonction reçoit un paramètre, qui est une fonction. Cette fonction contient les variables auxquelles il faut répondre. Lorsque ces variables changent, la fonction watchEffect déclenchera automatiquement cette fonction. Par exemple :

import { watchEffect } from 'vue'

watchEffect(() => {
  // 需要响应的变量
  console.log('变量发生变化了')
})

Dans l'exemple ci-dessus, nous utilisons la fonction watchEffect pour observer une variable. Lorsque la variable change, la console affichera "La variable a changé".

Ensuite, nous pouvons envoyer une requête Ajax dans la fonction watchEffect :

import { watchEffect } from 'vue'
import axios from 'axios'

watchEffect(() => {
  // 需要响应的变量
  axios.get('/api/data')
    .then(response => {
      // 处理响应的数据
    })
})

Dans l'exemple ci-dessus, lorsque la variable réactive change, le code de la fonction watchEffect s'exécutera automatiquement, enverra la requête Ajax et traitera les données de réponse.

En plus de la fonction watchEffect, Vue 3 fournit également la fonction montre. La fonction de surveillance reçoit deux paramètres. Le premier paramètre est la variable qui doit être surveillée et le deuxième paramètre est la fonction de rappel qui doit être exécutée lorsque la variable change. Par exemple :

import { watch } from 'vue'
import axios from 'axios'

watch(
  // 监听的变量
  () => data.value,
  // 变量发生变化时执行的回调函数
  (newValue, oldValue) => {
    axios.get('/api/data')
      .then(response => {
        // 处理响应的数据
      })
  }
)

Dans l'exemple ci-dessus, lorsque la variable data.value change, la fonction de surveillance exécutera automatiquement la fonction de rappel, enverra la requête Ajax et traitera les données de réponse.

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!