Vue コンポーネントで手ぶれ補正とスロットルを使用する方法の簡単な分析

Vue コンポーネントで手ぶれ補正とスロットリングを使用するにはどうすればよいですか?次の記事では、Vue コンポーネントで手ぶれ補正およびスロットリング コントロール オブザーバーとイベント ハンドラーを使用する方法を例を通して説明します。

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

これらのイベントは常に頻繁に (おそらくは数秒に 1 回) トリガーされます。イベントごとにフェッチ リクエスト (または同様の動作) を発行するのは賢明ではありません。

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

この記事では、Vue コンポーネントで手ぶれ補正およびスロットリング コントロール オブザーバー (ウォッチャー) とイベント ハンドラーを使用する方法を学習します。 [関連する推奨事項: "vue.js チュートリアル "]

1. オブザーバーの手ぶれ補正

単純なコンポーネントから始めます。私たちのタスクは、入力されたテキストです。テキスト ボックスがコンソールに出力されます:

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(newValue, oldValue) {
      console.log("Value changed: ", newValue);
    }
  }
};
</script>

オープン デモ:

https://codesandbox.io/s/vue-input-szgn1?file=/ src/App .vue

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

ウォッチャーを使用して value データ属性を監視することにより、印刷ログを実装します。ただし、オブザーバーのコールバックのパラメーターとして value を含む GET リクエストを含める場合は、リクエストを頻繁に実行することは期待できません。

コンソール ログの印刷動作に手振れ補正を加えてみましょう。中心となるアイデアは、デバウンス関数を作成し、オブザーバー内でその関数を呼び出すことです。

ここでは 'lodash.debounce' のアンチシェイク実装を選択しましたが、好みの実装を自由に選択できます。

デバウンス ロジックをコンポーネントに適用しましょう:

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(...args) {
      this.debouncedWatch(...args);
    },
  },
  created() {
    this.debouncedWatch = debounce((newValue, oldValue) => {
      console.log(&#39;New value:&#39;, newValue);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedWatch.cancel();
  },
};
</script>

デモを試してください

https://codesandbox.io/s/vue-input-debounced - 4vwex?file=/src/App.vue

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

ただし、1 つ違いがあります。新しい入力値は、最後の入力の 500ms 後にのみコンソールに記録されます。手ぶれ補正が効いていることがわかります。

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

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

• オブザーバー コールバック watch.value() { ... } に正しいパラメーターを渡し、 this.debouncedWatch() を呼び出します。

• 最後に、フック this.debouncedWatch.cancel() で beforeUnmount() が呼び出され、コンポーネントをアンインストールする前に保留中のすべてをキャンセルします。手ぶれ補正機能が実行されます。

同様に、任意のデータ属性のオブザーバーに手ぶれ補正を適用できます。これにより、ネットワーク リクエストや負荷の高い DOM 操作など、より重い操作をアンチシェイク コールバック内で安全に実行できるようになります。

2. イベント ハンドラーのアンチシェイク

上のセクションでは、オブザーバーにアンチシェイクを使用する方法を説明しましたが、通常のイベント ハンドラーではどうなるでしょうか?

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

いつものように、バッファリング措置を講じないと、値が変更されるたびにコンソールに出力されます:

<template>
  <input v-on:input="handler" type="text" />
</template>
<script>
export default {
  methods: {
    handler(event) {
      console.log(&#39;New value:&#39;, event.target.value);
    }
  }
};
</script>

デモを試してください:

https://codesandbox.io/s/vue-event-handler-plls4?file=/src/App.vue

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

同様に、負荷の高い操作 (ネットワーク リクエストなど) を実行する場合には適していません。

イベント プロセッサで手ぶれ補正を使用するには、次を参照してください:

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  created() {
    this.debouncedHandler = debounce(event => {
      console.log(&#39;New value:&#39;, event.target.value);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedHandler.cancel();
  }
};
</script>

デモを試してください:

https://codesandbox.io /s/vue -event-handler-debounced-973vn?file=/src/App.vue

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

イベント プロセッサのアンチシェイク実装には 3 つのステップのみが必要です:

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

• 在输入框的 template 中 给 v-on:input 赋上 debouncedHandler ：<input v-on:input="debouncedHandler" type="text" />

• 最后，在卸载组件之前， 在 beforeUnmount() 钩子中 调用 this.debouncedHandler.cancel() ，取消所有还在 pending 的 函数调用。

另一方面，这些例子应用了 防抖 的技术。然而，同样的方式可以以用于创建 节流函数。

3. 注意

你可能不理解：为什么不直接在 组件的 method 选项中创建 防抖函数，然后在 template 中调用这些方法作为事件处理器？

// ...
  methods: {
    // Why not?
    debouncedHandler: debounce(function () { ... }}, 500)
  }
// ...

这比在实例对象上创建 防抖函数 要简单的多。

例如：

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  methods: {
    // Don&#39;t do this!
    debouncedHandler: debounce(function(event) {
      console.log(&#39;New value:&#39;, event.target.value);
    }, 500)
  }
};
</script>

试试 demo

https://codesandbox.io/s/vue-event-handler-debounced-incorrectly-320ci?file=/src/App.vue

这次不是在 created() 钩子 里创建 防抖回调了，而是将 防抖回调 赋给了 methods.debouncedHandler 。

你如果试过 demo，你会发现是有效果的！

问题是，组件使用 export default { ... } 导出的 options 对象，包括方法，会被组件实例重用。

如果网页中有 2 个以上的组件实例，那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。

4. 总结

在 Vue 中，可以很轻松的对 观察者 和 事件处理器 应用 防抖 和 节流。

核心逻辑就是，在 created() 钩子 里，创建 防抖 或 节流 的回调，并赋值在实例上。

// ...
  created() {
    this.debouncedCallback = debounce((...args) => {
      // The debounced callback
    }, 500);
  },
// ...

A）然后在观察者内部调用实例上的防抖函数：

// ...
  watch: {
    value(...args) {
      this.debouncedCallback(...args);
    },
  },
// ...

B）或在 template 中设定一个事件处理器：

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>

在这之后，每次调用 this.debouncedCallback(...args) ，就算执行频率非常高，内部的回调也能缓冲执行。

你对 Vue 中的 防抖 和 节流 还什么问题吗？欢迎提问！

更多编程相关知识，请访问：编程入门！！

以上がVue コンポーネントで手ぶれ補正とスロットルを使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。