要创建debpublished方法，你可以使用computed，这样它们就不会在组件的多个实例之间共享:

<template>
  <input @input="handleInputDebounced">
<template>

<script>
import debounce from 'lodash.debouce';

export default {
  props: {
    timeout: {
      type: Number,
      default: 200,
    },
  },
  methods: {
    handleInput(event) {
      // input handling logic
    },
  },
  computed: {
    handleInputDebounced() {
      return debounce(this.handleInput, this.timeout);
    },
  },
}
</script>

你也可以让它与不受控制的v-model一起工作:

<template>
  <input v-model="debouncedModel">
<template>

<script>
import debounce from 'lodash.debouce';

export default {
  props: {
    value: String,
    timeout: {
      type: Number,
      default: 200,
    },
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    },
  },
  computed: {
    updateValueDebounced() {
      return debounce(this.updateValue, this.timeout);
    },
    debouncedModel: {
      get() { return this.value; },
      set(value) { this.updateValueDebounced(value); }
    },
  },
}
</script>

选项1:可重复使用，无deps

-如果在你的项目中需要不止一次，建议使用

/ helpers.js

export function debounce (fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

/ Component.vue

<script>
  import {debounce} from './helpers'

  export default {
    data () {
      return {
        input: '',
        debouncedInput: ''
      }
    },
    watch: {
      input: debounce(function (newVal) {
        this.debouncedInput = newVal
      }, 500)
    }
  }
</script>

Codepen

选项2:组件内，也没有deps

-建议一次性使用或用于小型项目

/ Component.vue

<template>
    <input type="text" v-model="input" />
</template>

<script>
  export default {
    data: {
        timeout: null,
        debouncedInput: ''
    },
    computed: {
     input: {
        get() {
          return this.debouncedInput
        },
        set(val) {
          if (this.timeout) clearTimeout(this.timeout)
          this.timeout = setTimeout(() => {
            this.debouncedInput = val
          }, 300)
        }
      }
    }
  }
</script>

Codepen

我也有同样的问题，这里有一个解决方案，没有插件。

因为<input v-model="xxxx">与

<input
   v-bind:value="xxxx"
   v-on:input="xxxx = $event.target.value"
>

(源)

我想我可以在xxxx = $event.target.value中为xxxx赋值时设置一个debounce函数

像这样

<input
   v-bind:value="xxxx"
   v-on:input="debounceSearch($event.target.value)"
>

方法:

debounceSearch(val){
  if(search_timeout) clearTimeout(search_timeout);
  var that=this;
  search_timeout = setTimeout(function() {
    that.xxxx = val; 
  }, 400);
},

下面是一个Vue 2组件示例，演示了如何使用debounce。

<template>
  <div>
    <v-btn @click="properDebounceMyMethod">Proper debounce</v-btn>
    <v-btn @click="notWorkingDebounceMyMethod">!debounce</v-btn>
    <v-btn @click="myMethod">normal call</v-btn>
  </div>
</template>

<script lang="ts" >
import { defineComponent } from '@vue/composition-api';
import { debounce } from 'lodash';

export default defineComponent({
  name: 'DebounceExample',
  created() {
    // debounce instance method dynamically on created hook
    this.properDebounceMyMethod = debounce(this.properDebounceMyMethod, 500);
  },
  methods: {
    properDebounceMyMethod(){
      this.myMethod();
    },
    notWorkingDebounceMyMethod() {
      debounce(this.myMethod, 500);
    },
    myMethod() {
      console.log('hi from my method');
    },
  }
});
</script>

短版本使用箭头函数，默认延迟值

文件:debounce.js in ex: (import debounce from '../../跑龙套/防反跳”)

export default function (callback, delay=300) {
    let timeout = null
    return (...args) => {
        clearTimeout(timeout)
        const context = this
        timeout = setTimeout(() => callback.apply(context, args), delay)
    }
}

2 Mixin选项

文件:debounceMixin.js

export default {
  methods: {
    debounce(func, delay=300) {
      let debounceTimer;
      return function() {
       // console.log("debouncing call..");
        const context = this;
        const args = arguments;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => func.apply(context, args), delay);
        // console.log("..done");
      };
    }
  }
};

在vueComponent中使用:

<script>
  import debounceMixin from "../mixins/debounceMixin";
  export default {
   mixins: [debounceMixin],
        data() {
            return {
                isUserIdValid: false,
            };
        },
        mounted() {
        this.isUserIdValid = this.debounce(this.checkUserIdValid, 1000);
        },
    methods: {
        isUserIdValid(id){
        // logic
        }
  }
</script>

另一个选项，例子

Vue搜索输入反弹

虽然这里几乎所有的答案都是正确的，如果有人正在寻找一个快速的解决方案，我有一个指令。 https://www.npmjs.com/package/vue-lazy-input

它适用于@input和v-model，支持自定义组件和DOM元素，debounce和throttle。

Vue.use(VueLazyInput) new Vue({ el: '#app', data() { return { val: 42 } }, methods:{ onLazyInput(e){ console.log(e.target.value) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/lodash/lodash.min.js"></script><!-- dependency --> <script src="https://unpkg.com/vue-lazy-input@latest"></script> <div id="app"> <input type="range" v-model="val" @input="onLazyInput" v-lazy-input /> {{val}} </div>