Vue 3 Watch 防抖节流：优化数据变化监听

在 Vue 3 中，可以使用'watch'函数来监听数据的变化。如果需要对监听的数据进行防抖或节流，可以结合'lodash'库中的'debounce'和'throttle'函数来实现。

首先，安装'lodash'库：

npm install lodash

然后，在 Vue 组件中引入'watch'函数和'debounce'或'throttle'函数：

import { watch } from 'vue';
import { debounce, throttle } from 'lodash';

export default {
  data() {
    return {
      inputValue: ''
    };
  },
  setup() {
    watch(
      () => this.inputValue,
      debounce((newValue) => {
        // 防抖处理逻辑
        console.log('debounced value:', newValue);
      }, 500)
    );

    watch(
      () => this.inputValue,
      throttle((newValue) => {
        // 节流处理逻辑
        console.log('throttled value:', newValue);
      }, 500)
    );
  }
};

上述代码中，我们使用'watch'函数来监听'inputValue'的变化。在'watch'的回调函数中，通过'debounce'函数设置了500毫秒的防抖间隔，并打印了防抖后的新值。同样，使用'throttle'函数设置了500毫秒的节流间隔，并打印了节流后的新值。

这样，当'inputValue'的变化频繁时，防抖和节流将有效地减少对应处理函数的触发频率。