Eu tenho uma caixa de entrada simples em um modelo do Vue e gostaria de usar o debounce mais ou menos assim:

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

No entanto, a debouncepropriedade foi descontinuada no Vue 2 . A recomendação diz apenas: "use v-on: input + função de debounce de terceiros".

Como você o implementa corretamente?

Eu tentei implementá-lo usando lodash , v-on: input e v-model , mas estou pensando se é possível fazer isso sem a variável extra.

No modelo:

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

No script:

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

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

A chave de filtro é então usada mais tarde em computedadereços.

Estou usando o pacote debounce NPM e implementado assim:

<input @input="debounceInput">

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

Usando lodash e o exemplo na pergunta, a implementação se parece com isso:

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

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

Atribuir debounce methodspode ser um problema. Então, em vez disso:

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

Você pode tentar:

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

Torna-se um problema se você tiver várias instâncias de um componente - semelhante à maneira como datadeve ser uma função que retorna um objeto. Cada instância precisa de sua própria função de rejeição, se eles devem agir de forma independente.

Aqui está um exemplo do 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>

atualizado em 2020

Opção 1: reutilizável, sem deps

(Recomendado se necessário mais de uma vez no seu projeto)

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

Opção 2: no componente, sem deps

(Recomendado se usar uma vez ou em um projeto pequeno)

Component.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

Muito simples sem lodash

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

Eu tive o mesmo problema e aqui está uma solução que funciona sem plugins.

Como <input v-model="xxxx">é exatamente o mesmo que

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

(fonte)

Eu imaginei que poderia definir uma função de debounce na atribuição de xxxx em xxxx = $event.target.value

como isso

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

Observe que eu postei essa resposta antes da resposta aceita. Não é correto. É apenas um passo à frente da solução na pergunta. Eu editei a pergunta aceita para mostrar a implementação do autor e a implementação final que eu havia usado.

Com base nos comentários e no documento de migração vinculado , fiz algumas alterações no código:

No modelo:

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

No script:

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

E o método que define a chave de filtro permanece o mesmo:

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

Parece que há menos uma chamada (apenas a v-model, e não a v-on:input).

Se você precisar de uma abordagem muito minimalista, criei uma (originalmente bifurcada no vuejs-tips para também oferecer suporte ao IE) disponível aqui: https://www.npmjs.com/package/v-debounce

Uso:

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

Então no seu 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>

Caso você precise aplicar um atraso dinâmico com a debouncefunção do 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) {
    // ...
  }
}

E o modelo:

<template>
  //...

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

  //...
</template>

NOTA: no exemplo acima, fiz um exemplo de entrada de pesquisa que pode chamar a API com um atraso personalizado, fornecido emprops

Embora praticamente todas as respostas aqui já estejam corretas, se alguém estiver em busca de uma solução rápida, tenho uma diretiva para isso. https://www.npmjs.com/package/vue-lazy-input

Aplica-se a @input e v-model, suporta componentes personalizados e elementos DOM, debounce e 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>

Se você estiver usando o Vue, também poderá usar em v.model.lazyvez de, debouncemas lembre-sev.model.lazy se de que nem sempre funcionará, pois o Vue o limita para componentes personalizados.

Para componentes personalizados, você deve usar :valuejunto com@change.native

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

Se você pudesse mover a execução da função debounce para algum método de classe, poderia usar um decorador a partir da utils-decorators lib ( npm install --save utils-decorators):

import {debounce} from 'utils-decorators';

class SomeService {

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

Podemos fazer isso usando poucas linhas de código JS:

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

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

Solução simples! Trabalho perfeito! Espero que seja útil para vocês.

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

decor-propriedade-vue