Vue コンポーネントでのアンチシェイクとスロットリングの使用例の分析

入力ボックスへのユーザー入力、ウィンドウのサイズ変更、スクロール、Intersection Observer イベントなど、頻繁にトリガーされるイベントをリッスンする場合は注意してください。

これらのイベントは常に頻繁に、おそらく数秒ごとにトリガーされます。すべてのイベントに対してフェッチ要求 (または同様の要求) を開始するのは賢明ではありません。

必要なのは、イベントハンドラーの実行を遅くすることだけです。このバッファリング技術は、デバウンスとスロットルです。

1. オブザーバーの安定化

簡単なコンポーネントから始めましょう。私たちのタスクは、ユーザーがテキストボックスに入力したテキストをコンソールに出力することです。

<テンプレート>
  <input v-model="値" type="テキスト" />
  <p>{{ 値 }}</p>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      価値： ""、
    };
  },
  時計：
    値(新しい値、古い値) {
      console.log("値が変更されました: ", newValue);
    }
  }
};
</スクリプト>

デモを開く:
https://codesandbox.io/s/vue-input-szgn1?file=/src/App.vue

デモを開き、入力ボックスにいくつかの文字を入力します。エントリが作成されるたびに、値がコンソールに記録されます。

ウォッチャーを使用して値データプロパティを監視することで、ログ記録を実装します。しかし、オブザーバーコールバックで値をパラメーターとして GET リクエストを追加する場合、リクエストを頻繁に行うことはおそらく想定されません。

コンソールログを印刷する動作をデバウンスしてみましょう。基本的な考え方は、デバウンス関数を作成し、オブザーバー内でその関数を呼び出すことです。

ここでは「lodash.debounce」デバウンス実装を選択しましたが、好みの実装を自由に選択できます。

コンポーネントに手ぶれ防止ロジックを適用してみましょう。

<テンプレート>
  <input v-model="値" type="テキスト" />
  <p>{{ 値 }}</p>
</テンプレート>
<スクリプト>
「lodash.debounce」からdebounceをインポートします。
エクスポートデフォルト{
  データ（） {
    戻る {
      価値： ""、
    };
  },
  時計：
    値(...引数) {
      this.debouncedWatch(...args);
    },
  },
  作成された() {
    this.debouncedWatch = debounce((newValue, oldValue) => {
      console.log('新しい値:', newValue);
    }, 500);
  },
  アンマウント前() {
    this.debouncedWatch.cancel();
  },
};
</スクリプト>

デモを試す
https://codesandbox.io/s/vue-input-debounced-4vwex?file=/src/App.vue

このデモを開くと、ユーザーの観点からはあまり変わっていないことがわかります。以前のデモと同様に、文字を自由に入力できます。

ただし、違いが 1 つあります。新しい入力値は、最後の入力から 500 ミリ秒後にのみコンソールに記録されます。これは手ぶれ防止機能が動作していることを示しています。

オブザーバーの手ぶれ補正の実装には、次の 3 つの簡単な手順だけが必要です。

create() フックで、デバウンスコールバックを作成し、インスタンスに割り当てます: this.debouncedWatch = debounce(..., 500)。

オブザーバーコールバック watch.value() { ... } で正しい引数を指定して this.debouncedWatch() を呼び出します。

最後に、コンポーネントをアンインストールする前に、保留中のすべてのデバウンス関数の実行をキャンセルするために、 beforeUnmount() フックで this.debouncedWatch.cancel() が呼び出されます。

同様に、任意のデータプロパティのオブザーバーにデバウンスを適用できます。その後、ネットワークリクエストや負荷の高い DOM 操作など、より重い操作をアンチシェイクコールバック内で安全に実行できます。

2. イベントプロセッサの手ぶれ補正

前のセクションでは、オブザーバーに手ぶれ補正を使用する方法を説明しましたが、通常のイベントハンドラーの場合はどうでしょうか。

ユーザーが入力ボックスにデータを入力する前回の例を再利用しますが、今回は入力ボックスにイベントハンドラーを追加します。

通常どおり、バッファリング対策を講じないと、値が変更されるたびにコンソールに出力されます。

<テンプレート>
  <input v-on:input="ハンドラ" type="テキスト" />
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  メソッド: {
    ハンドラ(イベント) {
      console.log('新しい値:', event.target.value);
    }
  }
};
</スクリプト>

デモをお試しください:
https://codesandbox.io/s/vue-イベントハンドラー-plls4?file=/src/App.vue

このデモを開き、入力ボックスにいくつかの文字を入力します。コンソールを見てください。入力するたびに何かが印刷されることがわかります。

同様に、負荷の高い操作 (ネットワークリクエストなど) を実行する場合、これは適切ではない可能性があります。

イベントハンドラーにアンチシェイクを使用するには、以下を参照してください。

<テンプレート>
  <input v-on:input="debouncedHandler" type="text" />
</テンプレート>
<スクリプト>
「lodash.debounce」からdebounceをインポートします。
エクスポートデフォルト{
  作成された() {
    this.debouncedHandler = デバウンス(イベント => {
      console.log('新しい値:', event.target.value);
    }, 500);
  },
  アンマウント前() {
    デバウンスされたハンドラをキャンセルします。
  }
};
</スクリプト>

デモをお試しください:
https://codesandbox.io/s/vue-イベントハンドラー-debounced-973vn?file=/src/App.vue

デモを開いて文字をいくつか入力します。コンポーネントは、最後の入力から 500 ミリ秒後にのみ、新しい入力値をコンソールに記録します。手ぶれ補正がまた効きました！

イベントハンドラーのデシェイクの実装には、次の 3 つの手順のみが必要です。

create() フックでは、インスタンスを作成した後、すぐにデバウンスコールバック debounce(event => {...}, 500) を this.debouncedHandler に割り当てます。

入力ボックスのテンプレートで、debouncedHandler を v-on:input: に割り当てます。

最後に、コンポーネントをアンマウントする前に、beforeUnmount() フックで this.debouncedHandler.cancel() を呼び出して、保留中のすべての関数呼び出しをキャンセルします。

一方、これらの例では手ぶれ補正技術が使用されています。ただし、同じアプローチを使用してスロットル関数を作成することもできます。

3. 注記

理解できないかもしれません。コンポーネントのメソッドオプションでアンチシェイク機能を作成し、テンプレートでこれらのメソッドをイベントハンドラーとして呼び出せばよいのではないでしょうか。

// ...
  メソッド: {
    // なぜだめですか？
    デバウンスされたハンドラ: デバウンス(関数 () { ... }}, 500)
  }
// ...

これは、インスタンスオブジェクトにデバウンス関数を作成するよりもはるかに簡単です。

例えば：

<テンプレート>
  <input v-on:input="debouncedHandler" type="text" />
</テンプレート>
<スクリプト>
「lodash.debounce」からdebounceをインポートします。
エクスポートデフォルト{
  メソッド: {
    // これをしないでください!
    debouncedHandler: debounce(function(event) {
      console.log('新しい値:', event.target.value);
    }, 500)
  }
};
</スクリプト>

デモを試す
https://codesandbox.io/s/vue-イベントハンドラー-デバウンス-incorrectly-320ci?file=/src/App.vue

今回は、created() フックでデバウンスコールバックを作成する代わりに、デバウンスコールバックが methods.debouncedHandler に割り当てられます。

デモを試してみれば、それが機能することがわかります。

問題は、メソッドを含む、export default {...} を使用してコンポーネントによってエクスポートされたオプションオブジェクトが、コンポーネントインスタンスによって再利用されることです。

ページ上にコンポーネントのインスタンスが 2 つ以上ある場合、すべてのコンポーネントに同じデバウンス関数 methods.debouncedHandler が適用されます。これにより、デバウンスが誤動作する可能性があります。

4. 結論

Vue では、ウォッチャーとイベントハンドラーにデバウンスとスロットリングを簡単に適用できます。

コアロジックは、created() フックでアンチシェイクまたはスロットリングコールバックを作成し、それをインスタンスに割り当てることです。

// ...
  作成された() {
    this.debouncedCallback = debounce((...args) => {
      // デバウンスされたコールバック
    }, 500);
  },
// ...

A) 次に、オブザーバー内でインスタンスの debounce 関数を呼び出します。

// ...
  時計：
    値(...引数) {
      this.debouncedCallback(...args);
    },
  },
// ...

B) または、テンプレートにイベントハンドラーを設定します。

<テンプレート>
  <input v-on:input="debouncedHandler" type="text" />
</テンプレート>

以降は、this.debouncedCallback(...args) が呼び出されるたびに、実行頻度が非常に高い場合でも内部コールバックをバッファリングできます。

これで、Vue コンポーネントでの手ぶれ補正とスロットリングの例の分析に関するこの記事は終了です。Vue コンポーネントの使用に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: