Vue3 watch 触发两次导致接口调用两次数据错乱解决方法（不使用lodash库）

在 Vue 3 中，watch 默认情况下会立即执行一次回调函数，并在依赖项发生变化时再次执行回调函数。如果不希望在初始时立即执行回调函数，可以将 { immediate: false } 选项传递给 watch 函数。

以下是一个示例，展示如何在 Vue 3 中使用 watch 避免接口调用两次和数据错乱的问题：

import { ref, watch } from 'vue';

export default {
  setup() {
    const data = ref(null);

    const fetchData = async () => {
      // 模拟异步获取数据
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve('API Data');
        }, 1000);
      });
    };

    watch(
      () => data.value,
      async (newValue, oldValue) => {
        if (newValue !== oldValue) {
          await fetchData();
          // 处理接口返回的数据，更新data.value
          data.value = 'Updated Data';
        }
      },
      { immediate: false } // 设置immediate为false，避免初始时立即执行回调函数
    );

    return {
      data
    };
  }
};

在上述示例中，watch 监听了 data 的变化。当 data 的值发生变化时，会执行回调函数。在回调函数中，首先使用 fetchData 函数模拟异步获取数据的过程，然后根据接口返回的数据更新 data.value 的值。

通过设置 immediate: false 选项，可以确保在初始时不会立即执行回调函数，避免接口调用两次和数据错乱的问题。