Cara mengeluarkan permintaan secara automatik apabila data berubah dalam Vue3

Dalam Vue 3, dipacu data ialah salah satu konsep yang sangat penting. Vue 3 melaksanakan prinsip responsif melalui Proksi, yang secara automatik memaparkan semula komponen apabila data berubah, sekali gus mencapai pengikatan dua hala data dan pandangan.

Namun, dalam proses pembangunan sebenar, kita selalunya perlu melakukan perkara lain apabila data berubah, seperti menghantar permintaan Ajax. Jadi bagaimana untuk mengeluarkan permintaan secara automatik apabila data berubah dalam Vue 3?

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 tindak balas.

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 melaksanakan fungsi panggil balik secara automatik, menghantar permintaan Ajax dan memproses data respons.

Ringkasnya, sama ada menggunakan fungsi watchEffect atau fungsi jam tangan, kami boleh melaksanakan fungsi menghantar permintaan secara automatik apabila data berubah, dengan itu menjadikan aplikasi kami lebih pintar dan cekap.

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