vue.js 2.x その0005 lodashのdebounce()とthrottle()で処理の実行を遅らせる

参考にさせて頂いたページ

• 公式チュートリアルから始めるVue.js vol.1「Markdown エディタ」 - to-R Media
• Vue 1.x からの移行 - Vue.js
• Markdown エディタ - Vue.js
• lodashの_.throttleと_.debounceの使用例 - Qiita

はじめに

vue.jsの0.xと1.xではdebounce属性がありましたが、2.xからは無くなったことが公式ドキュメントに書いてあります。

Vue 1.x からの移行 - Vue.js

代わりにlodash.jsのdebounce()またはthrottle()を使用して、処理の実行を遅らせるサンプルを書いてみます。

サンプルコード

CDNでlodashを読み込んで、throttle()を使用するサンプルを書いてみました。

公式ドキュメントのサンプルではmethods内でdebounceを適用していますが、watch内でthrottleを適用するサンプルを書いてみました。

<div id="vue-app">
  <h1>Vue.jsの練習 静的なページ</h1>
  <input type="text" v-model="valText">
  <div>{{lateText}}</div>
<!--/#vue-app--></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="js/vue.js"></script>
<script>
  new Vue({
    el: '#vue-app',
    data: {
      valText: '',
      lateText: '',
    },
    watch: {
      valText: _.throttle(function(){
        console.log('changed');
        this.lateText = this.valText;
      }, 500)
    }
  });
</script>