vue-cliでLodashのdebounceを使う方法

やりたかったこと

vue.js (vue-cli) で作っているSPAで、textareaが編集されたら最後の編集から数秒後に保存の処理を実行する。

---

『基礎から学ぶVue.js (通称「猫本」)』を見てみると、Lodashのdebounceを使うと実現できるとのこと。
>基礎から学ぶVue.js - サポートページ

こちらを参考にvue-cliで実現した方法をまとめます。

Lodashをnpmでインストールする

Lodash公式ページに書いてあるコマンドを実行します。

$ npm i --save lodash

Lodashをインポートする

vue

<script>
import _ from 'lodash'

export default {
// ~ 中略 ~
}
</script>

Lodashを使用するvueファイルのscriptの先頭でインポートします。

CDNを利用してLodashにアクセスする時は _ (アンダースコア) を使うので、それに倣ってimport名も _ にしました。jQueryで $ を使うような感じみたいです。

このインポートのやり方がググっても中々出てこなくて苦労しました。。

debounceを使う

vue

<script>
import _ from 'lodash'

export default {
// ~ 中略 ~
  data() {
    return {
      memos: [
        {
          markdown: ""
        }
      ]
  },
  watch: {
    memos: {
      handler: _.debounce(function() {
        this.saveMemos(); // 実行したい処理
      }, 2000), // memosのデータの更新が終わった2秒後に実行される
      deep: true
    }
  },
// ~ 中略 ~
};
</script>

watchオプション内のコードは猫本のサポートページに書いてあるのとほとんど同じです。

それに加えて、ネストされたオブジェクトも監視するオプション「deep」と、handlerプロパティを使っています。textareaのデータをmemos内のmarkdownに保存しているためです。

これでやりたいことができました…！

参考文献

Lodashとは？

・Lodashで配列処理

・細かすぎるけど伝わって欲しいlodash.jsの話 (KAYAC engineer's blog)

debounceとは？

・debounce とは (slideship)

・lodash の debounce や throttle で簡単に負荷対策 (Qiita)