Vue.jsとlodashを使用したイベントのスロットリングとデバウンス

提供：Dev Guides
移動先:案内、検索

序章

イベントのスロットリングとデバウンスは、パフォーマンスを向上させ、ネットワークのオーバーヘッドを潜在的に下げるための2つのアプローチを指します。

Vue.js 1は、イベントのデバウンスをネイティブでサポートしていましたが、 Vue.js2で削除されました。

その結果、Vue.js 2でイベントを抑制およびデバウンスするための一般的なアプローチは、lodashなどのサードパーティライブラリを使用することです。

このチュートリアルでは、lodash.throttleとlodash.debounceをVue.js2アプリケーションに適用します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

このチュートリアルは、ノードv15.8.0、npm v7.5.4、vue v2.6.11、およびlodashv4.17.20で検証されました。

プロジェクトの設定

プロジェクトをすばやく設定するために、この記事では @ vue /cliの使用をお勧めします。

注：この記事では、npxを使用して、@vue/cliのグローバルインストールを回避する方法を採用します。 


npx @vue/cli create vue-lodash-example

プリセット（デフォルト（[Vue 2] babel、eslint））とパッケージマネージャー（ npm ）を選択したら、新しく作成したプロジェクトディレクトリに移動します。 

cd vue-lodash-example

ここで、次のコマンドを使用して、プロジェクトにlodashを追加します。 

npm install lodash

注： lodashのすべてをインポートする必要がない場合は、webpackをカスタマイズすると、使用する関数に合わせてライブラリのサイズを小さくできます。 [X38X]やlodash.debounceなどのパッケージで、lodashの一部を個別にインポートすることもできます。


次に、コードエディタを使用して、componentsディレクトリに新しいUnmodifiedComponent.vueファイルを作成します。

src / components / UnmodifiedComponent.vue 

<template>
  <div>
    <h1>Unmodified Events</h1>
    <button @click="unmodifiedMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
export default {
  methods: {
    unmodifiedMethod: () => {
      console.log('Button clicked!')
    }
  }
}
</script>

次に、App.vueを変更して、新しいUnmodifiedComponentを使用します。

src / App.vue 

<template>
  <div id="app">
    <UnmodifiedComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent
  }
}
</script>

これで、Vue.jsアプリケーションを実行できます。 

npm run serve

Webブラウザでlocalhost:8080に移動し、Webブラウザのボタンを操作します。 コンソールはすべてのインタラクションをログに記録します。 これらのイベントは、クリックするたびにすぐに発生します。 このメソッドを変更して、throttleおよびdebounceを使用します。

スロットル方法

次に、スロットルをVueアプリケーションに適用します。 スロットリングを使用して、イベントを確実に保存し、時間の経過とともに分離することができます。

コードエディタを使用してUnmodifiedComponentをコピーし、新しいThrottleComponentを作成します。

ThrottleComponent.vue 

<template>
  <div>
    <h1>Throttled Events</h1>
    <button @click="throttleMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    throttleMethod: _.throttle(() => {
      console.log('Throttle button clicked!')
    }, 2000)
  }
}
</script>

次に、App.vueを変更して、新しいThrottleComponentを使用します。

src / App.vue 

<template>
  <div id="app">
    <UnmodifiedComponent/>
    <ThrottleComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent,
    ThrottleComponent
  }
}
</script>

これで、Vue.jsアプリケーションを実行できます。 

npm run serve

Webブラウザでlocalhost:8080に移動し、Webブラウザのボタンを操作します。 コンソールはすべてのインタラクションをログに記録します。 複数の連続したイベントは、2000ミリ秒（2秒）の遅延で一貫して発生します。

デバウンスメソッド

次に、debounceをVueアプリケーションに適用します。 デバウンスは基本的にイベントをグループ化し、頻繁に発生しないようにします。

コードエディタを使用してUnmodifiedComponentをコピーし、新しいDebounceComponentを作成します。

DebounceComponent.vue 

<template>
  <div>
    <h1>Debounced Events</h1>
    <button @click="debounceMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    debounceMethod: _.debounce(() => {
      console.log('Debounce button clicked!')
    }, 2000)
  }
}
</script>

次に、App.vueを変更して、新しいDebounceComponentを使用します。

src / App.vue 

<template>
  <div id="app">
    <UnmodifiedComponent/>
    <ThrottleComponent/>
    <DebounceComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'
import DebounceComponent from './components/DebounceComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent,
    ThrottleComponent,
    DebounceComponent
  }
}
</script>

これで、Vue.jsアプリケーションを実行できます。 

npm run serve

Webブラウザでlocalhost:8080に移動し、Webブラウザのボタンを操作します。 コンソールはすべてのインタラクションをログに記録します。 複数の連続したイベントは、2000ミリ秒（2秒）ごとに1回の最後のクリック後にのみ発生します。

結論

このチュートリアルでは、lodash.throttleとlodash.debounceをVue.js2アプリケーションに適用しました。

lodashについて詳しく知りたい場合は、公式ドキュメントをお読みください。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

「https://www.finddevguides.com/index.php?title=Vue.jsとlodashを使用したイベントのスロットリングとデバウンス&oldid=101371」から取得
Powered by MediaWiki