剪贴板监听必须在 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 → 报错或静默失败

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！