事件委托通过在父元素绑定单个监听器、利用冒泡机制识别目标元素，显著减少监听器数量、降低内存占用、提升动态列表性能。
Vue 中事件处理器的委托优化，核心在于减少重复监听、降低内存占用、提升动态列表性能。它不是“替代”常规绑定，而是针对高频、批量、动态场景的精准补强。
为什么需要事件委托
当一个列表渲染上百个按钮或行项时，每个元素单独绑 @click，就会创建同等数量的事件监听器。这些监听器：占用独立内存、增加 GC 压力、拖慢挂载速度、且新增/删除子项时需手动重绑。而事件委托只在父容器上设一个监听器，靠事件冒泡 + event.target 判断真实触发源，从根源上规避上述问题。
怎么写一个可靠的委托处理
关键不在“有没有绑在父级”，而在“能不能准确识别目标并安全执行”。需注意三点：
- 用
event.target获取真正被点击的 DOM 元素（不是父容器） - 用属性标识行为，比如
data-action="edit"或class="btn-delete"，避免依赖文本内容或层级顺序 - 做类型和存在性校验，防止误触非目标元素（如点击到 padding 区域、文字节点或嵌套子标签）
示例写法：
- {{ item.name }}
对应方法：
methods: {onListClick(e) {
const el = e.target;
if (el.tagName === 'LI' && el.dataset.action === 'view') {
this.onView(el.dataset.id);
}
}
}
哪些场景特别适合用委托
不是所有点击都要委托，但以下情况强烈建议：
- 表格行操作列（编辑/删除/详情），尤其是使用
<el-table></el-table>等组件时 - 无限滚动或虚拟滚动列表，DOM 频繁增删
- v-for 渲染超过 50 项的按钮组、图标栏、菜单项
- 需要支持运行时动态插入新子项，又不想每次插入后手动
$nextTick补绑
Vue 3 的额外红利：cacheHandlers
Vue 3 编译器在生成渲染函数时，会对不依赖响应式数据的事件处理器自动启用 cacheHandlers 优化——即把 handler 函数缓存一次，避免每次 patch 都新建闭包。这和事件委托不冲突，而是叠加生效：委托本身减少监听器数量，cacheHandlers 进一步减少 handler 创建开销。你不需要手动开启，只要 handler 内部没引用 this.xxx 等响应式变量，编译器就会默默帮你做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
