面试题：Vue中如何使用事件委托来绑定列表项点击事件

Question

假设有一个Vue组件，其中包含一个列表，列表项数量较多。请描述如何利用事件委托的方式来绑定点击事件，以提高性能并减少事件绑定数量。并给出相应的Vue代码示例。

Answer 1

事件委托原理

事件委托是利用事件冒泡的特性，将子元素的事件委托给父元素来处理。这样只需要在父元素上绑定一个事件监听器，而不是为每个子元素都绑定事件，从而减少事件绑定数量，提高性能。

Vue代码示例

<template>
  <div @click="handleClick">
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`)
    };
  },
  methods: {
    handleClick(event) {
      // 判断点击的是否是子元素
      if (event.target.tagName === 'DIV') {
        const itemIndex = Array.from(this.$el.children).indexOf(event.target);
        const clickedItem = this.list[itemIndex];
        console.log(`Clicked item: ${clickedItem}`);
      }
    }
  }
};
</script>

在上述代码中：

1. 在父 div 上绑定了 click 事件，即 @click="handleClick"。
2. 列表项通过 v-for 指令循环渲染。
3. 在 handleClick 方法中，通过判断 event.target 的标签名来确定是否点击了列表项，如果是，则计算出点击的列表项的索引，并获取对应的列表项数据进行处理。