J'ai une boîte de saisie simple dans un modèle Vue et je voudrais utiliser un debounce plus ou moins comme ceci:

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

Cependant, la debouncepropriété est obsolète dans Vue 2 . La recommandation dit seulement: "utiliser v-on: entrée + fonction anti-rebond tierce".

Comment le mettez-vous correctement en œuvre?

J'ai essayé de l'implémenter en utilisant lodash , v-on: input et v-model , mais je me demande s'il est possible de se passer de la variable supplémentaire.

Dans le modèle:

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

Dans le script:

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

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

La clé de filtre est ensuite utilisée plus tard dans les computedaccessoires.

J'utilise le package debounce NPM et implémenté comme ceci:

<input @input="debounceInput">

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

En utilisant lodash et l'exemple de la question, l'implémentation ressemble à ceci:

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

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

L'attribution d'un anti-rebond methodspeut poser problème. Donc au lieu de ça:

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

Vous pouvez essayer:

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

Cela devient un problème si vous avez plusieurs instances d'un composant - de la même manière que datadevrait être une fonction qui renvoie un objet. Chaque instance a besoin de sa propre fonction anti-rebond si elle est censée agir indépendamment.

Voici un exemple du problème:

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>

mis à jour en 2020

Option 1: réutilisable, pas de profondeur

(Recommandé si nécessaire plus d'une fois dans votre projet)

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

Option 2: dans le composant, pas de déps

(Recommandé si vous utilisez une fois ou dans un petit projet)

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

Très simple sans lodash

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

J'ai eu le même problème et voici une solution qui fonctionne sans plugins.

Depuis <input v-model="xxxx">est exactement le même que

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

(la source)

J'ai pensé que je pourrais définir une fonction anti-rebond sur l'attribution de xxxx dans xxxx = $event.target.value

comme ça

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

méthodes:

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

Veuillez noter que j'ai posté cette réponse avant la réponse acceptée. Ce n'est pas correct. C'est juste un pas en avant par rapport à la solution de la question. J'ai édité la question acceptée pour montrer à la fois l'implémentation de l'auteur et l'implémentation finale que j'avais utilisée.

Sur la base des commentaires et du document de migration lié , j'ai apporté quelques modifications au code:

Dans le modèle:

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

Dans le script:

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

Et la méthode qui définit la clé de filtre reste la même:

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

On dirait qu'il y a un appel de moins (juste le v-model, et pas le v-on:input).

Si vous avez besoin d'une approche très minimaliste à ce sujet, j'en ai fait une (à l'origine dérivée de vuejs-tips pour également prendre en charge IE) qui est disponible ici: https://www.npmjs.com/package/v-debounce

Usage:

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

Puis dans votre composant:

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

Au cas où vous auriez besoin d'appliquer un délai dynamique avec la debouncefonction du 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) {
    // ...
  }
}

Et le modèle:

<template>
  //...

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

  //...
</template>

REMARQUE: dans l'exemple ci-dessus, j'ai fait un exemple d'entrée de recherche qui peut appeler l'API avec un délai personnalisé qui est fourni dansprops

Bien que pratiquement toutes les réponses ici soient déjà correctes, si quelqu'un est à la recherche d'une solution rapide, j'ai une directive à ce sujet. https://www.npmjs.com/package/vue-lazy-input

Il s'applique à @input et v-model, prend en charge les composants personnalisés et les éléments DOM, anti-rebond et accélérateur.

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 vous utilisez Vue, vous pouvez également utiliser à la v.model.lazyplace de, debouncemais rappelez v.model.lazy- vous que cela ne fonctionnera pas toujours car Vue le limite pour les composants personnalisés.

Pour les composants personnalisés, vous devez utiliser :valueavec@change.native

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

Si vous pouviez déplacer l'exécution de la fonction anti-rebond dans une méthode de classe, vous pourriez utiliser un décorateur de utils-decorators lib ( npm install --save utils-decorators):

import {debounce} from 'utils-decorators';

class SomeService {

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

Nous pouvons faire avec en utilisant quelques lignes de code JS:

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

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

Solution simple! Travaillez parfaitement! Hope, sera utile pour vous les gars.

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

vue-propriété-décorateur