序章

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

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

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

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

前提条件

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

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

プロジェクトの設定

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

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

  1. npx @vue/cli create vue-lodash-example

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

  1. cd vue-lodash-example

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

npm install lodash

注: lodashのすべてをインポートする必要がない場合は、webpackをカスタマイズすると、使用する関数に合わせてライブラリのサイズを小さくできます。 [X38X]