Vue を使用して動的リストやフォームを開発する場合、多くの場合、クリック イベント、マウスの出入りイベントなど、リスト項目やフォーム要素ごとにイベントをバインドする必要があります。ただし、一般的な方法を使用してこれらのイベント バインディングを実装すると、各要素をイベントに 1 回バインドする必要があるため、より多くのパフォーマンスが消費されます。要素の数が増加すると、それに応じてイベント バインディングの数も増加し、結果的にページの応答が遅くなります。
パフォーマンスを最適化するために、イベント委任を使用して動的リストまたはフォームのイベント バインディングを実装できます。いわゆるイベント委任とは、親要素に子要素のイベント処理を委任させることです。具体的な方法としては、親要素にイベントリスナーをバインドし、イベント発生時にイベントソースが子要素かどうかを判断してどのような動作を行うかを決定します。
Vue では、親要素にイベント リスナーをバインドし、イベント オブジェクトの target プロパティを使用してイベント ソースが子要素であるかどうかを判断することで、イベント委任を実装できます。たとえば、イベント委任を使用して動的リスト内のクリック イベントをバインドするには、次のコードを使用できます。
1. 一般的な方法を使用して動的リスト toDoList のイベント バインディングを実現すると、より多くのパフォーマンスが消費されます。
<template>
<ul id="chat-box">
<li v-for="(item, index) in messageList" :key="index" @click="onClick(item)">
{
{item}}
</li>
</ul>
</template>
<script>
export default {
components: {},
data() {
return {
messageList:[1, 2, 3]
}
},
methods: {
onClick(item) {
//对数据进行处理
console.log(item)
}
}
}
</script>
2. イベント委任のパフォーマンスが向上します。
<template>
<ul id="chat-box" @click="(e) => onClick(e)">
<li v-for="(item, index) in messageList" :key="index">
{
{item}}
</li>
</ul>
</template>
<script>
export default {
components: {},
data() {
return {
messageList:[1, 2, 3]
}
},
methods: {
onClick(e) {
const target = e.target;
if(target && target.nodeName === 'LI'){
const index = Array.from(target.parentNode.children).indexOf(target);
let item = this.messageList[index];
//对数据进行处理
console.log(item)
}
}
}
}
</script>上記のコードでは、クリック イベント リスナーを ul 要素にバインドし、イベント ハンドラー内のイベント オブジェクトの target プロパティを使用して、イベントが li 要素によってトリガーされるかどうかを判断し、li 要素の位置を取得します。親要素 (つまり、リスト項目のインデックス) を取得し、最後に処理のためのインデックスに従って対応するリスト項目データを取得します。
イベント委任を使用して動的リストやフォームのイベント バインディングを実現すると、イベント バインディングの数が大幅に削減され、ページの応答速度が向上し、Vue 開発でパフォーマンスを最適化する一般的な方法でもあります。