【Vue.js】lodashを使ってwatch処理を遅延させる

最近になって、lodashの「debounce」というメソッドを知りました。

lodash の debounce や throttle で簡単に負荷対策 - Qiita

Lodash Documentation

こちらは、引数に渡した処理を遅延して実行してくれるメソッドです。

結構使いどころが多そうだったので、 普段業務で利用している「vue.js」のwatchオプションに対して、lodashの「debounce」メソッドを使う方法をメモしておきます。

// lodashは別途、インストール・importしている想定。

watch: {
　// debounceは、関数を返す。
  testData: _.debounce(function(val) {
    console.log(val)
  }, 1000)
}

上記のように使うことで、vueのwatch処理の負荷を軽減させることができます。

ユーザー入力値に合わせてのリアルタイム検索など、重い処理を行う場合に便利そうです。