Vue3でデータ変更時にリクエストを自動発行する方法

Vue 3 では、データドリブンは非常に重要な概念の 1 つです。 Vue 3 は、データが変更されたときにコンポーネントを自動的に再レン​​ダリングするプロキシを通じて応答性の原則を実装し、データとビューの双方向のバインディングを実現します。

ただし、実際の開発プロセスでは、データが変更されたときに、Ajax リクエストの送信など、他の作業が必要になることがよくあります。では、Vue 3 でデータが変更されたときにリクエストを自動的に発行するにはどうすればよいでしょうか?

1 つの方法は、Vue 3 で提供される watchEffect 関数を使用することです。この関数は、関数である 1 つのパラメーターを受け取ります。この関数には、応答する必要がある変数が含まれています。これらの変数が変更されると、watchEffect 関数がこの関数を自動的にトリガーします。例:

import { watchEffect } from 'vue'

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

上の例では、watchEffect 関数を使用して変数を観察しています。変数が変化すると、コンソールに「変数が変化しました。」と出力されます。

次に、watchEffect 関数で Ajax リクエストを送信できます。

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

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

上の例では、応答変数が変更されると、watchEffect 関数のコードが自動的に実行され、Ajax リクエストが送信されます。応答データを要求して処理します。

watchEffect 関数に加えて、Vue 3 は watch 関数も提供します。 watch 関数は 2 つのパラメータを受け取ります。最初のパラメータは監視する必要がある変数で、2 番目のパラメータは変数が変化したときに実行する必要があるコールバック関数です。例:

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

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

上記の例では、data.value 変数が変更されると、監視関数は自動的にコールバック関数を実行し、Ajax リクエストを送信し、応答データを処理します。

つまり、watchEffect 関数を使用しても watch 関数を使用しても、データが変化したときに自動的にリクエストを送信する機能を簡単に実装でき、それによってアプリケーションをよりインテリジェントかつ効率的にすることができます。

以上がVue3でデータ変更時にリクエストを自動発行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。