面试题：Vue v - on事件监听器中如何进行事件委托并优化性能

Question

在一个Vue列表渲染的场景下，列表中有大量的项，每个项都需要绑定一个点击事件。为了提升性能，需要使用事件委托的方式。请描述如何利用v - on指令实现事件委托，以及这样做相较于为每个项单独绑定事件，在性能优化方面的原理是什么？

Answer 1

利用v - on指令实现事件委托

1. HTML结构：假设列表项是一个li元素，包裹在ul元素内。

<ul v - on:click="handleClick">
  <li v - for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

2. Vue实例中的方法：在Vue实例的methods选项中定义handleClick方法。

export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3', /* 大量项 */]
    };
  },
  methods: {
    handleClick(event) {
      // 判断点击的是否是列表项li
      if (event.target.tagName === 'LI') {
        // 在这里处理点击逻辑，例如获取点击项的数据
        const clickedItem = this.list.find(item => item === event.target.textContent);
        console.log('Clicked item:', clickedItem);
      }
    }
  }
};

性能优化原理

1. 减少内存占用：
   • 为每个项单独绑定事件：每个列表项都有一个独立的事件处理函数，这意味着随着列表项数量的增加，内存中会存储大量的事件处理函数，占用较多内存。
   • 事件委托：通过在父元素（如上述例子中的ul）上绑定一个事件处理函数，无论列表项有多少，内存中只存在这一个事件处理函数，大大减少了内存的占用。
2. 减少DOM操作：
   • 为每个项单独绑定事件：每次添加或移除列表项时，都需要重新绑定或解绑事件，这涉及到较多的DOM操作，而DOM操作是比较昂贵的。
   • 事件委托：由于事件处理函数绑定在父元素上，列表项的添加或移除不会影响事件绑定，减少了不必要的DOM操作，提升了性能。