素晴らしい chat4; vue をクリックして同じクラス名の要素を取得する方法、パフォーマンスの最適化

Vue で同じクラス名の要素をクリックして要素の 1 つを取得する必要がある場合は、パフォーマンスの最適化を使用してコードの効率と実行速度を向上させることもできます。

一般的なパフォーマンスの最適化方法は、イベント委任 (イベント委任) テクノロジを使用することです。つまり、イベントハンドラーは各子要素ではなく親要素にバインドされます。このようにして、子要素がクリックされると、イベントが親要素にバブルアップされ、親要素のイベントハンドラーがイベントの処理を担当するため、子要素ごとにイベントハンドラーをバインドするオーバーヘッドが回避されます。

具体的には、 Vue コンポーネントで$refs属性とネイティブ JavaScript メソッドを使用して、イベント委任を実装できます。例えば：

<template>
  <div class="my-wrapper" @click="handleClick">
    <div ref="myElements" class="my-element">元素 1</div>
    <div ref="myElements" class="my-element">元素 2</div>
    <div ref="myElements" class="my-element">元素 3</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      // 判断触发事件的元素是否是 classname 为 my-element 的子元素
      if (event.target.classList.contains('my-element')) {
        // 找到对应的元素并输出序号
        const elements = this.$refs.myElements;
        const index = Array.prototype.indexOf.call(elements, event.target);
        console.log(`您点击了 ${index + 1} 号元素`);
      }
    }
  }
}
</script>

上記のコードでは、まずイベントハンドラーをmy-wrapperテンプレート内の classname を持つ親要素にバインドし、次に JavaScriptclassList.containsメソッドを使用して、イベントをトリガーする要素がmy-elementclassname を持つ子要素であるかどうかを判断します。「はい」の場合、$refs属性とネイティブ JavaScript メソッドを使用して、対応する要素を取得し、そのシリアル番号を出力します。

この利点は、1 つのイベントハンドラーのみを 1 つの親要素にバインドする必要があるため、子要素ごとにイベントハンドラーをバインドするオーバーヘッドを回避できるため、コードの効率と実行速度が向上することです。

素晴らしい chat4; vue をクリックして同じクラス名の要素を取得する方法、パフォーマンスの最適化

おすすめ