У мене є просте поле введення в шаблоні Vue, і я хотів би використовувати дебюнс більш-менш так:

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

Однак debounceмайно застаріло у Vue 2 . Рекомендація говорить лише: "використовувати v-on: input + стороння функція дебютації".

Як ви правильно це реалізуєте?

Я намагався реалізувати це за допомогою lodash , v-on: input та v-model , але мені цікаво, чи можна обійтися без зайвої змінної.

У шаблоні:

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

У сценарії:

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

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

Потім кнопка фільтра буде використана пізніше в computedреквізиті.

Я використовую пакет декупажу NPM та реалізований так:

<input @input="debounceInput">

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

Використовуючи lodash та приклад у питанні, реалізація виглядає приблизно так:

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

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

Призначення дебютації methodsможе бути проблемою. Тож замість цього:

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

Ви можете спробувати:

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

Це стає проблемою, якщо у вас є кілька примірників компонента - подібним чином dataмає бути функція, яка повертає об'єкт. Кожен екземпляр потребує своєї функції дебютації, якщо вони повинні діяти незалежно.

Ось приклад проблеми:

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>

оновлено у 2020 році

Варіант 1: Повторне використання, без деп

(Рекомендується, якщо потрібно більше одного разу у вашому проекті)

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: Вбудований компонент, без пропусків

(Рекомендується, якщо використовується один раз або в невеликому проекті)

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

Дуже просто без лодашу

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

У мене була така ж проблема, і ось рішення, яке працює без плагінів.

Так <input v-model="xxxx">як точно такий же, як

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

(джерело)

Я подумав, що можу встановити функцію дебютування при призначенні xxxx в xxxx = $event.target.value

подобається це

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

Зверніть увагу, що я опублікував цю відповідь до прийнятої відповіді. Це не правильно. Це лише крок вперед від вирішення питання. Я відредагував прийняте питання, щоб показати як авторську реалізацію, так і остаточну реалізацію, яку я використав.

На основі коментарів та пов'язаного документа про міграцію я вніс кілька змін до коду:

У шаблоні:

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

У сценарії:

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

І метод, що встановлює ключ фільтра, залишається таким же:

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

Схоже, є один менш дзвінок (лише той v-model, а не той v-on:input).

Якщо вам потрібен дуже мінімалістичний підхід до цього, я зробив такий (спочатку розщеплений від vuejs-tips, щоб також підтримувати IE), який доступний тут: https://www.npmjs.com/package/v-debounce

Використання:

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

Потім у своєму компоненті:

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

Якщо вам потрібно застосувати динамічну затримку з функцією lodash debounce:

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) {
    // ...
  }
}

І шаблон:

<template>
  //...

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

  //...
</template>

ПРИМІТКА: у наведеному вище прикладі я зробив приклад введення пошуку, який може викликати API із власною затримкою, яка надана вprops

Хоча майже всі відповіді тут уже правильні, якщо хтось шукає швидкого рішення, у мене є директива для цього. https://www.npmjs.com/package/vue-lazy-input

Це стосується @input та v-моделі, підтримує користувацькі компоненти та елементи DOM, дебютацію та дросель.

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>

Якщо ви використовуєте Vue, ви можете також використовувати v.model.lazyзамість цього, debounceале пам'ятайте, що v.model.lazyвін не завжди працює, оскільки Vue обмежує його для користувацьких компонентів.

Для користувацьких компонентів ви повинні використовувати :valueразом із@change.native

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

Якщо ви можете перемістити виконання функції debounce в якийсь метод класу, ви можете використовувати декоратор з lib utils-decorators ( npm install --save utils-decorators):

import {debounce} from 'utils-decorators';

class SomeService {

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

Ми можемо зробити це за допомогою декількох рядків коду JS:

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

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

Просте рішення! Праця ідеально! Сподіваюся, вам будуть корисні хлопці.

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

vue-властивість-декоратор