Tengo un cuadro de entrada simple en una plantilla Vue y me gustaría usar debounce más o menos así:

<input type="text" v-model="filterKey" debounce="500">

Sin embargo, la debouncepropiedad ha quedado en desuso en Vue 2 . La recomendación solo dice: "use v-on: input + función de rebote de terceros".

¿Cómo lo implementas correctamente?

Intenté implementarlo usando lodash , v-on: input y v-model , pero me pregunto si es posible prescindir de la variable adicional.

En plantilla:

<input type="text" v-on:input="debounceInput" v-model="searchInput">

En script:

data: function () {
  return {
    searchInput: '',
    filterKey: ''
  }
},

methods: {
  debounceInput: _.debounce(function () {
    this.filterKey = this.searchInput;
  }, 500)
}

La clave de filtro se usa luego en computedaccesorios.

Estoy usando el paquete NPM debounce e implementado así:

<input @input="debounceInput">

methods: {
    debounceInput: debounce(function (e) {
      this.$store.dispatch('updateInput', e.target.value)
    }, config.debouncers.default)
}

Usando lodash y el ejemplo en la pregunta, la implementación se ve así:

<input v-on:input="debounceInput">

methods: {
  debounceInput: _.debounce(function (e) {
    this.filterKey = e.target.value;
  }, 500)
}

Asignar un rebote methodspuede ser un problema. Entonces, en lugar de esto:

// Bad
methods: {
  foo: _.debounce(function(){}, 1000)
}

Puedes probar:

// Good
created () {
  this.foo = _.debounce(function(){}, 1000);
}

Se convierte en un problema si tiene varias instancias de un componente, de forma similar a como datadebería ser una función que devuelve un objeto. Cada instancia necesita su propia función antirrebote si se supone que debe actuar de forma independiente.

Aquí hay un ejemplo del problema:

Vue.component('counter', {
  template: '<div>{{ i }}</div>',
  data: function(){
    return { i: 0 };
  },
  methods: {
    // DON'T DO THIS
    increment: _.debounce(function(){
      this.i += 1;
    }, 1000)
  }
});


new Vue({
  el: '#app',
  mounted () {
    this.$refs.counter1.increment();
    this.$refs.counter2.increment();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

<div id="app">
  <div>Both should change from 0 to 1:</div>
  <counter ref="counter1"></counter>
  <counter ref="counter2"></counter>
</div>

actualizado en 2020

Opción 1: reutilizable, sin profundidad

(Recomendado si es necesario más de una vez en su proyecto)

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

Componente.vue

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

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

Codepen

Opción 2: en componentes, sin profundidad

(Recomendado si se usa una vez o en un proyecto pequeño)

Componente.vue

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

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

Codepen

Muy simple sin lodash

  handleScroll: function() {
   if (this.timeout) clearTimeout(this.timeout); 
   this.timeout = setTimeout(() => {
     // your action
   }, 200);
  }

Tuve el mismo problema y aquí hay una solución que funciona sin complementos.

Dado que <input v-model="xxxx">es exactamente lo mismo que

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

(fuente)

Pensé que podría establecer una función antirrebote en la asignación de xxxx en xxxx = $event.target.value

Me gusta esto

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

métodos:

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

Tenga en cuenta que publiqué esta respuesta antes de la respuesta aceptada. No es correcto. Es solo un paso adelante de la solución en la pregunta. He editado la pregunta aceptada para mostrar tanto la implementación del autor como la implementación final que había utilizado.

Según los comentarios y el documento de migración vinculado , he realizado algunos cambios en el código:

En plantilla:

<input type="text" v-on:input="debounceInput" v-model="searchInput">

En script:

watch: {
  searchInput: function () {
    this.debounceInput();
  }
},

Y el método que establece la clave de filtro permanece igual:

methods: {
  debounceInput: _.debounce(function () {
    this.filterKey = this.searchInput;
  }, 500)
}

Parece que hay una llamada menos (solo la v-modely no la v-on:input).

Si necesita un enfoque muy minimalista para esto, hice uno (originalmente bifurcado de vuejs-tips para que también sea compatible con IE) que está disponible aquí: https://www.npmjs.com/package/v-debounce

Uso:

<input v-model.lazy="term" v-debounce="delay" placeholder="Search for something" />

Luego en su componente:

<script>
export default {
  name: 'example',
  data () {
    return {
      delay: 1000,
      term: '',
    }
  },
  watch: {
    term () {
      // Do something with search term after it debounced
      console.log(`Search term changed to ${this.term}`)
    }
  },
  directives: {
    debounce
  }
}
</script>

En caso de que necesite aplicar un retraso dinámico con la debouncefunción lodash :

props: {
  delay: String
},

data: () => ({
  search: null
}),

created () {
     this.valueChanged = debounce(function (event) {
      // Here you have access to `this`
      this.makeAPIrequest(event.target.value)
    }.bind(this), this.delay)

},

methods: {
  makeAPIrequest (newVal) {
    // ...
  }
}

Y la plantilla:

<template>
  //...

   <input type="text" v-model="search" @input="valueChanged" />

  //...
</template>

NOTA: en el ejemplo anterior, hice un ejemplo de entrada de búsqueda que puede llamar a la API con un retraso personalizado que se proporciona enprops

Aunque casi todas las respuestas aquí ya son correctas, si alguien está buscando una solución rápida, tengo una directiva para esto. https://www.npmjs.com/package/vue-lazy-input

Se aplica a @input y v-model, admite componentes personalizados y elementos DOM, antirrebote y acelerador.

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>

Si está usando Vue, también puede usarlo en v.model.lazylugar de debouncepero recuerdev.model.lazy que no siempre funcionará, ya que Vue lo limita para componentes personalizados.

Para componentes personalizados debe usar :valuejunto con@change.native

<b-input :value="data" @change.native="data = $event.target.value" ></b-input>

Si pudieras mover la ejecución de la función antirrebote a algún método de clase, podrías usar un decorador de utils-decorators lib ( npm install --save utils-decorators):

import {debounce} from 'utils-decorators';

class SomeService {

  @debounce(500)
  getData(params) {
  }
}

Podemos hacerlo usando pocas líneas de código JS:

if(typeof window.LIT !== 'undefined') {
      clearTimeout(window.LIT);
}

window.LIT = setTimeout(() => this.updateTable(), 1000);

¡Solución simple! Trabajo perfecto! Espero que sea útil para ustedes.

 public debChannel = debounce((key) => this.remoteMethodChannelName(key), 200)

decorador de propiedades vue