Vue2 & Vue3 事件委托原理与优势

Vue2 事件委托原理

  • Vue2 通过自定义指令（如 v-on）为每个组件或元素绑定事件监听器。
  • 在组件渲染时，Vue2 会为每个需要监听事件的 DOM 元素单独绑定事件处理函数。
  • 如果有大量元素（如长列表），每个元素都绑定事件，可能导致性能下降和内存占用增加。
  • Vue2 没有内置事件委托机制，通常需要手动在父元素上监听事件，通过事件冒泡处理子元素的事件。

示例：

<ul @click="handleClick">
  <li v-for="item in list" :key="item.id" :data-id="item.id">{{ item.name }}</li>
</ul>
<script>
export default {
  methods: {
    handleClick(e) {
      const id = e.target.dataset.id;
      if (id) {
        // 处理点击的子元素
        console.log('点击了ID为', id, '的项');
      }
    }
  }
}
</script>

Vue3 事件委托原理

  • Vue3 依然通过 v-on 实现事件绑定，但底层采用 Proxy 和更高效的虚拟 DOM diff，事件处理机制更优化。
  • Vue3 渲染时会自动合并和复用事件处理器，减少重复绑定，提升性能。
  • 事件监听器可以更灵活地绑定在父级或根节点，通过事件冒泡实现委托。
  • 更好地支持原生事件和自定义事件，兼容性更强。

示例：

<ul @click="handleClick">
  <li v-for="item in list" :key="item.id" :data-id="item.id">{{ item.name }}</li>
</ul>
<script setup>
function handleClick(e) {
  const id = e.target.dataset.id;
  if (id) {
    // 处理点击的子元素
    console.log('点击了ID为', id, '的项');
  }
}
</script>

Vue3 相比 Vue2 的事件委托优势

  • 性能更高：事件处理器自动合并和复用，减少内存占用和绑定次数。
  • 代码更简洁：组合式 API 和 <script setup> 写法让事件处理逻辑更清晰。
  • 更好兼容性：支持更多原生事件和自定义事件，事件系统更接近原生 DOM。
  • 更易维护：事件委托模式更容易处理动态列表和复杂交互场景。
  • 自动批处理：Vue3 支持自动批量更新，事件触发后视图更新更高效。
最近更新：:
Contributors: liyulai