Cara untuk mengeluarkan permintaan secara automatik apabila data berubah dalam Vue3

Salah satu cara ialah menggunakan fungsi watchEffect yang disediakan dalam Vue 3. Fungsi ini menerima satu parameter, iaitu fungsi. Fungsi ini mengandungi pembolehubah yang perlu dijawab. Apabila pembolehubah ini berubah, fungsi watchEffect akan mencetuskan fungsi ini secara automatik. Contohnya:

import { watchEffect } from 'vue'

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

Dalam contoh di atas, kami menggunakan fungsi watchEffect untuk memerhati pembolehubah Apabila pembolehubah berubah, konsol akan mengeluarkan "Pembolehubah telah berubah."

Seterusnya, kami boleh menghantar permintaan Ajax dalam fungsi watchEffect:

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

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

Dalam contoh di atas, apabila pembolehubah responsif berubah, kod dalam fungsi watchEffect akan secara automatik melaksanakan , menghantar Ajax meminta dan memproses data respons.

Selain fungsi watchEffect, Vue 3 juga menyediakan fungsi jam tangan. Fungsi jam tangan menerima dua parameter Parameter pertama ialah pembolehubah yang perlu dipantau, dan parameter kedua ialah fungsi panggil balik yang perlu dilaksanakan apabila pembolehubah berubah. Contohnya:

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

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

Dalam contoh di atas, apabila pembolehubah data.value berubah, fungsi jam tangan akan secara automatik melaksanakan fungsi panggil balik, menghantar permintaan Ajax dan memproses data respons.

Atas ialah kandungan terperinci Cara untuk mengeluarkan permintaan secara automatik apabila data berubah dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!