Vue 3 中使用 debounce 实现一定时间内执行最后一次 watch 操作

在 Vue 3 中，可以使用'watch'来监听数据的变化，并执行相应的操作。如果想要在一定时间内执行最后一次改变后的操作，可以使用'debounce'函数进行处理。

首先，需要引入'debounce'函数，可以使用 Lodash 库中提供的'debounce'函数，也可以自己实现一个简单的'debounce'函数。

import { debounce } from 'lodash';

// 或者自己实现一个简单的 debounce 函数
function debounce(func, wait) {
  let timeout;

  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait);
  };
}

然后，在 Vue 组件中使用'watch'和'debounce'函数来监听数据的变化，并执行最后一次改变后的操作。

export default {
  data() {
    return {
      inputValue: ''
    };
  },
  watch: {
    inputValue: {
      handler: debounce(function(newValue) {
        // 执行最后一次改变后的操作
        console.log(newValue);
      }, 500),
      immediate: false // 设置为 false，表示不立即执行
    }
  }
};

在上面的代码中，'inputValue'是要监听的数据，'debounce'函数的第一个参数是要执行的操作，第二个参数是延迟的时间（单位为毫秒）。设置'immediate'为'false'表示不立即执行，只有在'inputValue'改变后延迟一定时间后才会执行最后一次改变后的操作。

这样，在'inputValue'改变后，如果在 500 毫秒内没有再次改变，就会执行最后一次改变后的操作。如果在 500 毫秒内再次改变了'inputValue'，则会重新计时，等待下一次改变。