Vue3 中如何在数据变化时自动发起请求

在Vue3开发过程中，我们常常会遇到这样的需求：当某些数据发生变化时，需要自动发起网络请求来获取最新的数据。这一功能在很多场景下都至关重要，比如实时更新页面数据、根据用户操作动态获取信息等。那么，在Vue3里怎样才能实现这一需求呢？

可以利用 watch 函数。watch 函数可以用来监听一个或多个响应式数据的变化，一旦数据发生改变，就会触发相应的回调函数。例如，有一个响应式数据 searchQuery，我们希望在它变化时发起一个搜索请求：

import { ref, watch } from 'vue';
const searchQuery = ref('');
const searchResult = ref([]);

watch(searchQuery, async (newValue) => {
    if (newValue) {
        try {
            const response = await fetch(`https://example.com/api/search?q=${newValue}`);
            const data = await response.json();
            searchResult.value = data;
        } catch (error) {
            console.error('搜索请求出错:', error);
        }
    }
});

在上述代码中，watch 监听了 searchQuery 的变化，当它的值改变时，就会发起一个搜索请求，并将结果赋值给 searchResult。

computed 结合 watchEffect 也是一种不错的方式。computed 可以创建一个计算属性，而 watchEffect 会在其依赖项发生变化时自动重新执行。假设我们有多个相关的数据，并且希望在这些数据组合发生变化时发起请求：

import { ref, computed, watchEffect } from 'vue';
const category = ref('');
const subCategory = ref('');

const requestUrl = computed(() => {
    return `https://example.com/api/data?category=${category.value}&subCategory=${subCategory.value}`;
});

watchEffect(async () => {
    try {
        const response = await fetch(requestUrl.value);
        const data = await response.json();
        // 处理数据
    } catch (error) {
        console.error('请求出错:', error);
    }
});

这里 requestUrl 是一个计算属性，依赖于 category 和 subCategory。watchEffect 会在 requestUrl 依赖的任何数据发生变化时，自动发起请求。

通过合理运用 watch、computed 和 watchEffect 等Vue3的特性，我们能够轻松实现数据变化时自动发起请求的功能，为用户提供更加流畅、实时的数据交互体验。