剪贴板监听必须在 onBeforeUnmount 中注销，因 onUnmounted 时组件已销毁、响应式数据不可用；需用具名函数或稳定引用注册，并配合 useEventListener 封装以自动管理生命周期。
剪贴板监听事件（如 copy、cut、paste）属于全局 DOM 事件，必须在组件卸载前主动注销，否则会持续响应、触发错误逻辑，甚至造成内存泄漏。Vue 3 中最稳妥的方式是使用 onBeforeUnmount 钩子配合函数引用管理，避免箭头函数或内联写法。
为什么不能用 onUnmounted？
onUnmounted 触发时，组件实例已销毁，响应式数据（如 ref、computed）、this 上下文、DOM 节点均不可访问。而剪贴板事件监听器的注销需要确保 handler 是同一函数引用——若 handler 依赖响应式状态或内部方法，此时已失效。所以清理动作必须放在 onBeforeUnmount，此时组件仍完全可用，能安全调用 removeEventListener。
正确注册与注销剪贴板监听器
关键点：handler 必须是具名函数或稳定引用；监听目标通常为 document 或 window；注销时传入完全相同的函数和选项。
- 在
setup()中定义 handler，并用ref或闭包保持引用一致性 - 在
onMounted中注册：document.addEventListener('copy', handler) - 在
onBeforeUnmount中注销：document.removeEventListener('copy', handler) - 若需动态控制（如仅在编辑态监听），可结合
watch+ 手动清理逻辑
推荐用 useEventListener 封装（更安全）
直接使用 @vueuse/core 的 useEventListener 可自动处理生命周期绑定与解绑，且支持响应式参数变更：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 自动在挂载时注册、卸载前注销，无需手动写钩子
- 支持目标、事件名、handler 响应式更新（例如切换监听
copy或paste） - 默认监听
window，也可显式传入document - 返回清理函数，可在任意时机提前停止监听（比如用户退出编辑模式）
示例：useEventListener(document, 'copy', handleCopy) —— 一行代码完成全生命周期管理。
常见错误要避开
这些写法会导致注销失败或残留监听：
- 用箭头函数注册：
document.addEventListener('copy', () => {...})→ 卸载时无法获取同一引用 - 在
onUnmounted里注销 → handler 可能已失活，removeEventListener无效 - 多次调用
addEventListener同一事件但只注销一次 → 多余监听器继续运行 - handler 内部访问已销毁的 ref 或 computed → 报错或静默失败
