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

序章

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

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

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

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

前提条件

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

• Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
• デバウンスとスロットルにある程度精通している。
• Vue にある程度精通していると有益ですが、必須ではありません。
• Lodash にある程度精通していると有益ですが、必須ではありません。

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

プロジェクトの設定

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

npx @vue/cli create vue-lodash-example

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

cd vue-lodash-example

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

npm install lodash