动态组件中事件委托需绑定在稳定父容器上，避免内部手动绑定；推荐用ref获取父元素并在onMounted中添加监听，onBeforeUnmount中移除，配合event.target.matches精准处理目标事件。
Vue 动态组件（<component :is="...">）中，事件委托仍可生效，但需注意两点：一是委托目标必须是**始终存在且稳定**的父容器；二是动态组件内部的事件监听不能依赖于组件挂载时的 DOM 状态（比如 mounted 中直接 addEventListener），而应交由 Vue 的模板机制或生命周期外的静态容器处理。
用父级容器做委托目标（推荐）
把事件监听绑定在动态组件的**稳定父元素**上（如外层 <div> 或 <section>），利用事件冒泡捕获子元素触发的事件。Vue 渲染的 DOM 仍遵循原生事件流，只要父容器不销毁，委托就持续有效。
- 在模板中给父容器加
ref或唯一 class/id，例如：<div ref="listWrap" class="dynamic-list"><component :is="currentComp" /></div> - 在
mounted或onMounted中绑定委托（仅一次）：this.$refs.listWrap.addEventListener('click', this.handleDelegatedClick)（Options API）
或listWrap.value.addEventListener('click', handleDelegatedClick)（Composition API） - 在事件处理器中用
event.target判断是否命中目标元素，例如：if (e.target.matches('.item-btn')) { /* 处理按钮点击 */ }
避免在动态组件内部手动绑定（易失效）
不要在动态组件的 mounted 钩子里对自身内部元素调用 addEventListener，因为组件切换时旧实例被卸载，监听器未清理，新实例又重新绑定，可能造成重复监听或内存泄漏。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 若必须操作子元素，优先用 Vue 原生事件 + 修饰符，例如：
@click.stop="handleClick"，由 Vue 自动管理 - 若需委托逻辑（如统一处理多个 .delete-btn），仍应回到上层稳定容器处理，而非每个动态组件各自绑定
- 切勿在
v-for渲染的动态组件内写ref+addEventListener，ref 可能为空或指向错误节点
配合 v-once 或 key 控制委托稳定性
当动态组件频繁切换、但结构相似时，可借助 key 强制更新容器，确保委托监听器与当前 DOM 一致；或用 v-once 标记静态部分，减少不必要的重渲染干扰委托逻辑。
立即学习“Java免费学习笔记（深入）”；
- 给委托容器加唯一
:key="currentComp"，使其随组件切换重建，避免旧事件监听残留 - 若动态组件内容完全静态（如只展示不同 JSON 数据），可加
v-once提升性能，不影响委托——因为事件委托依赖的是 DOM 结构，不是响应性 - 注意：不要给
<component>本身加key来试图控制委托，它不解决父容器监听器的生命周期问题
Composition API 中的实践要点
使用 onMounted 和 onBeforeUnmount 显式管理委托监听器，防止内存泄漏和跨组件干扰。
- 在
setup中定义监听函数，并用闭包捕获必要上下文（如当前currentComp值） - 在
onMounted中添加监听，在onBeforeUnmount中移除：listWrap.value?.removeEventListener('click', handler) - 若委托需响应 props 或状态变化，可用
watch监听关键字段，按需更新委托逻辑（如切换匹配选择器）
