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
                  )
                })
              }
            }
          )
        }
    }
}