vue3 在 watch 中调用接口方法时被频繁执行的问题

在 Vue 3 中遇到了在 watch 中调用接口方法时被频繁执行的问题，可以考虑使用 debounce 或 throttle 函数来限制回调函数的执行次数

在 Vue 3 中，如果你在 watch 中调用接口方法，很可能会出现多次调用的情况。这是因为 watch 默认会在监听值变化时立即执行回调函数，而当值变化频繁时，就会导致回调函数被多次执行。

为了解决这个问题，你可以使用 debounce 或 throttle 函数来限制回调函数的执行次数。这两个函数可以防止回调函数被频繁执行，从而降低接口的请求次数。

下面是一个使用 lodash 库中的 debounce 函数的示例：

import { debounce } from 'lodash';

export default {
  data() {
    return {
      inputValue: ''
    };
  },
  watch: {
    inputValue: debounce(function(newValue) {
      // 调用接口方法
      yourApiMethod(newValue);
    }, 500)
  }
};

import { debounce } from 'lodash';

export default {
  setup() {
    const inputValue = ref('');

    // 使用 debounce 函数将回调函数延迟执行
    watch(inputValue, debounce(function(newValue) {
      // 调用接口方法
      yourApiMethod(newValue);
    }, 500));

    return {
      inputValue
    };
  }
};

在上述代码中，我们使用 lodash 库中的 debounce 函数将回调函数延迟执行。这个函数接收两个参数：第一个参数是回调函数，第二个参数是延迟时间（单位毫秒）。在这个示例中，我们将延迟时间设置为 500 毫秒，也就是说，当 inputValue 的值变化后，会等待 500 毫秒后才执行回调函数，从而防止回调函数被频繁执行。

除了 debounce，你还可以使用 throttle 函数来限制回调函数的执行次数。与 debounce 不同的是，throttle 会在一定时间内执行多次回调函数，而不是延迟执行。

import { throttle } from 'lodash';

export default {
  data() {
    return {
      inputValue: ''
    };
  },
  watch: {
    inputValue: throttle(function(newValue) {
      // 调用接口方法
      yourApiMethod(newValue);
    }, 500)
  }
};

import { throttle } from 'lodash';

export default {
  setup() {
    const inputValue = ref('');

    // 使用 throttle 函数限制回调函数的执行次数
    watch(inputValue, throttle(function(newValue) {
      // 调用接口方法
      yourApiMethod(newValue);
    }, 500));

    return {
      inputValue
    };
  }
};

在上述代码中，我们使用 lodash 库中的 throttle 函数将回调函数限制为每 500 毫秒执行一次。这个函数也接收两个参数：第一个参数是回调函数，第二个参数是限制时间（单位毫秒）。

总之，如果你在 Vue 3 中遇到了在 watch 中调用接口方法时被频繁执行的问题，可以考虑使用 debounce 或 throttle 函数来限制回调函数的执行次数。