如何处理Vue mixins中的去抖动？

Question

我有一个用于几个组件的mixin：

import { debounce } from 'lodash';

export default {
    computed: {
        returnable: {
            get() {
                return this.default;
            },

            set: debounce(function(value) {
                this.$emit('returnable', value);
            }, 500)
        }
    },
};

主要问题是debounce作为一个实例（全局）适用于所有组件，因此，如果我快速更改3个组件，则仅触发最后一个。而且我需要使用此mixin的每个组件都必须有自己的去抖动器实例。

Answer 1

您已经注意到，去抖动是棘手的，因为最终所有实例之间都共享相同的功能。

要为每个实例获取单独的函数，我们需要为每个组件实例分别调用debounce。最简单的操作是在created挂钩内。

所以像这样：

created () {
  this.setReturnable = debounce(value => {
    this.$emit('returnable', value);
  }, 500)
}

然后您可以从计算出的setReturnable内部调用set：

set (value) {
  this.setReturnable(value)
}

完整的示例，计时器增加到2秒，以便于测试：

const debounce = _.debounce

const Child = {
  template: `<input v-model="returnable">`,
  
  props: ['default'],

  computed: {
    returnable: {
      get() {
        return this.default;
      },

      set (value) {
        this.setReturnable(value)
      }
    }
  },
  
  created () {
    this.setReturnable = debounce(value => {
      this.$emit('returnable', value);
    }, 2000)
  }
}

new Vue({
  el: '#app',
  
  components: {
    Child
  },
  
  data () {
    return {
      first: '',
      second: ''
    }
  },
  
  methods: {
    onFirst (value) {
      this.first = value
    },
    
    onSecond (value) {
      this.second = value
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.js"></script>

<div id="app">
  <child :default="first" @returnable="onFirst"></child>
  <br><br>
  <child :default="second" @returnable="onSecond"></child>
  <p>{{ first }}</p>
  <p>{{ second }}</p>
</div>