Ho una semplice casella di input in un modello Vue e vorrei usare il debounce più o meno in questo modo:

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

Tuttavia, la debounceproprietà è stata deprecata in Vue 2 . La raccomandazione dice solo: "usa v-on: input + funzione di debounce di terze parti".

Come lo implementate correttamente?

Ho provato a implementarlo usando lodash , v-on: input e v-model , ma mi chiedo se sia possibile fare a meno della variabile extra.

Nel modello:

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

Nello script:

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

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

La chiave filtro viene quindi utilizzata in seguito negli computedoggetti di scena.

Sto usando il pacchetto NPM debounce e implementato in questo modo:

<input @input="debounceInput">

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

Utilizzando lodash e l'esempio nella domanda, l'implementazione è simile alla seguente:

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

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

Assegnare il rimbalzo methodspuò essere un problema. Quindi invece di questo:

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

Puoi provare:

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

Diventa un problema se hai più istanze di un componente - simile al modo in cui datadovrebbe essere una funzione che restituisce un oggetto. Ogni istanza necessita della propria funzione di debounce se si suppone che agisca in modo indipendente.

Ecco un esempio 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>

aggiornato nel 2020

Opzione 1: riutilizzabile, nessun deps

(Consigliato se necessario più di una volta nel progetto)

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

Opzione 2: nel componente, nessun deps

(Consigliato se si utilizza una volta o in piccoli progetti)

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

Molto semplice senza lodash

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

Ho avuto lo stesso problema ed ecco una soluzione che funziona senza plugin.

Since <input v-model="xxxx">è esattamente lo stesso di

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

(fonte)

Ho pensato di poter impostare una funzione di debounce sull'assegnazione di xxxx in xxxx = $event.target.value

come questo

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

metodi:

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

Si noti che ho inviato questa risposta prima della risposta accettata. Non è corretto È solo un passo avanti rispetto alla soluzione nella domanda. Ho modificato la domanda accettata per mostrare sia l'implementazione dell'autore sia l'implementazione finale che avevo usato.

Sulla base dei commenti e del documento di migrazione collegato , ho apportato alcune modifiche al codice:

Nel modello:

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

Nello script:

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

E il metodo che imposta la chiave del filtro rimane lo stesso:

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

Sembra che ci sia una chiamata in meno (solo il v-model, e non il v-on:input).

Se hai bisogno di un approccio molto minimalista a questo, ne ho creato uno (originariamente biforcuto da vuejs-tips per supportare anche IE) che è disponibile qui: https://www.npmjs.com/package/v-debounce

Uso:

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

Quindi nel tuo 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>

Nel caso in cui sia necessario applicare un ritardo dinamico con la debouncefunzione 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 il modello:

<template>
  //...

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

  //...
</template>

NOTA: nell'esempio sopra ho fatto un esempio di input di ricerca che può chiamare l'API con un ritardo personalizzato fornito inprops

Sebbene praticamente tutte le risposte qui siano già corrette, se qualcuno è alla ricerca di una soluzione rapida, ho una direttiva per questo. https://www.npmjs.com/package/vue-lazy-input

Si applica a @input e v-model, supporta componenti personalizzati ed elementi 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 stai usando Vue puoi anche usare v.model.lazyinvece di, debouncema ricordav.model.lazy che non funzionerà sempre poiché Vue lo limita per i componenti personalizzati.

Per i componenti personalizzati che dovresti usare :valueinsieme a@change.native

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

Se potessi spostare l'esecuzione della funzione di debounce in un metodo di classe, puoi usare un decoratore dal lib utils-decorators ( npm install --save utils-decorators):

import {debounce} from 'utils-decorators';

class SomeService {

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

Possiamo farlo usando poche righe di codice JS:

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

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

Soluzione semplice! Funziona perfettamente! Spero, sarà utile per voi ragazzi.

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

vue-proprietà-decorator