Vue2和Vue3使用防抖的技巧

Vue2和Vue3使用防抖的技巧

防抖一般使用在 watch 和 method上面

vue3 里面定义方法的时候，直接在setup里面使用 防抖函数包裹一下
const valueChnage = _.debounce(() => {
  console.log(val.value);
}, 500)

vue2里面有两种方法
第一种：
在created里面，在this上定义一个新函数，接受debounce的返回值
created () {
  this.debounceInput = this.debounce(this.handle, 1000,false)
}

第二种方法：
在methods里面定义方法的时候，不推荐 -- 因为如果这个组件在当前页面使用的多次，那么防抖可能出现故障 ---这个就类似于 data为什么必须一个函数的问题，组件每次新建，都必须是一个新地址，防抖函数也不例外
changeValue: _.debounce((e) => {
  console.log(e, this);
}, 500)

https://www.lodashjs.com/docs/lodash.debounce
DEMO实例 --- 优化watch的调用，还需要注意在 离开当前组件之前，最后一次防抖函数需要手动调用cancel取消，或者flush立即执行
<input type="text" v-model="value" />
<p>{{value}}</p>

created() {
  this.debounceWatch = _.debounce((newV, oldV) => {
    console.log(555, newV, oldV);
  }, 500)
  console.dir(this.debounceWatch);
},
beforeDestroy() {
  this.debounceWatch.cancel()
},
watch: {
  value(...args) {
    this.debounceWatch(...args)
  }
},