Vue.js动态列表中实现专属事件监听的最优方案咨询

以下是几种实用方案，按简洁性和性能优先级排序：

方案1：直接在模板中传递item参数（最常用简洁） #

不用额外写返回事件对象的方法，直接在绑定事件时传入当前item，每个项的事件逻辑自然和自身数据关联：

<template>
  <div>
    <item-component 
      v-for="item in items" 
      :key="item.id" 
      @click="handleItemClick(item)" 
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "item 1" },
        { id: 2, name: "item 2" },
        { id: 3, name: "item 3" }
      ]
    };
  },
  methods: {
    handleItemClick(item) {
      console.log(`Clicked on item with id: ${item.id}`);
      // 这里可根据item的唯一数据执行任意特定操作
    }
  }
};
</script>

优势：

• 代码直观易维护，没有冗余逻辑
• 避免了重复创建函数实例的性能损耗
• 天然适配列表动态变化，只要key使用唯一id，Vue会自动正确复用组件并绑定对应事件

方案2：事件委托（适合超大量列表项的性能优化） #

如果列表项数量极大，逐个绑定事件会有性能开销，可以在父容器上绑定单个监听器，通过事件冒泡获取目标项数据：

<template>
  <div @click="handleParentClick">
    <item-component 
      v-for="item in items" 
      :key="item.id" 
      :data-item-id="item.id"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "item 1" },
        { id: 2, name: "item 2" },
        { id: 3, name: "item 3" }
      ]
    };
  },
  methods: {
    handleParentClick(e) {
      const itemId = e.target.dataset.itemId;
      if (itemId) {
        const targetItem = this.items.find(item => item.id === parseInt(itemId));
        if (targetItem) {
          console.log(`Clicked on item with id: ${targetItem.id}`);
          // 执行对应操作
        }
      }
    }
  }
};
</script>

注意：需要确保item-component的根元素会继承data-item-id属性，或者手动在子组件中将该属性绑定到根元素上。

关于你当前代码的说明 #

你当前的写法实际可以运行，但存在两个问题：

1. 每次组件渲染时，uniqueEventListeners都会返回新的匿名函数实例，Vue无法复用事件监听器，列表较大时会产生不必要的性能损耗
2. 代码相对冗余，不如直接传递参数的写法直观

关于$listeners和$attrs的说明 #

这两个属性主要用于组件间的事件/属性透传（比如父组件把事件监听器传递给子组件，子组件无需显式声明props或emits就能接收），和你要给每个项绑定专属逻辑的场景不匹配，所以不需要用到它们。

内容的提问来源于stack exchange，提问作者Nuro007