Vue中使用函数防抖

情况

在最近的项目,遇到一个需求是要监控表单输入改变的时候,自动计算另一个表单项的值.
里面需要大量的循环和判断,导致页面卡顿,特别是连续输入的时候,整个页面甚至可能卡死.
经过多次尝试,都有this指向问题,而导致没有得到预期的效果.

解决

最终使用lodash里面的防抖函数debounce得以解决,其中还有两个注意的关键点就是,
创建的防抖函数,不是在methods里面定义,而是写在data里面定义.
然后在created()或者beforeMount()创建防抖方法,接着把原来的方法替换成防抖方法即可.

以下是粗略的关键代码:

export default {
    data() {
        // 防抖方法
        debounceHandleValuesChange: undefined
    },
    beforeMount() {
        // 设置防抖方法(周期内按下多次只会执行最后一次)
        // 注意: 这里只需要传入函数就行了(不用写括号参数,写了就是执行)
        this.debounceHandleValuesChange = debounce(this.handleValuesChange, 800)
    },
    methods: {
        // 原来多次重复使用的方法
        handleValuesChange(values,index,name) {
            // ...逻辑
            // 里面有一些有this的操作...
            console.log(this.msg)
        },
        
        // 把原来的方法替换成debounce返回的防抖方法即可
        xxx() {
            this.form = this.$form.createForm(
            this,
            {
              onValuesChange: (_, values) => {
                this.$nextTick(() => {
                  // this.handleValuesChange(          // 原来的方法
                  this.debounceHandleValuesChange(     // 防抖方法
                    values,
                    index,
                    name
                  )
                })
              }
            }
          )
        }
    }
}