Vue 响应式侦听如何在 watchEffect 中同步浏览器的剪贴板操作状态

在 watchEffect 中同步浏览器剪贴板操作状态，需将剪贴板读写结果封装为 ref 响应式变量（如 copiedText、isCopying、copyError），watchEffect 通过监听这些变量自动触发 UI 更新或重试逻辑；须在 await 前/后显式更新状态，前置权限与上下文检查，并可结合 v-clipboard 指令实现执行与响应分离。

在 watchEffect 中同步浏览器剪贴板操作状态，核心是把剪贴板的读写行为封装为响应式状态，并让 watchEffect 自动追踪其变化，触发对应副作用（如更新 UI、校验权限、重试粘贴等）。它不是直接监听剪贴板本身（浏览器不提供原生响应式剪贴板事件），而是监听你主动管理的“剪贴板状态”——比如 isCopied、clipboardText、copyError 等 ref 变量。

用 ref 封装剪贴板状态，让 watchEffect 自动追踪

剪贴板 API（navigator.clipboard）本身是非响应式的。你需要手动将操作结果映射为响应式数据：

1. 定义 copiedText = ref('') 表示最近一次成功复制的内容
2. 定义 isCopying = ref(false) 表示当前是否处于复制中
3. 定义 copyError = ref(null) 存储失败原因（如权限拒绝、空内容等）
4. 每次调用 navigator.clipboard.writeText() 后，显式更新这些 ref

这样 watchEffect 就能自动监听它们的变化，例如：

watchEffect(() => {if (copiedText.value) {// 显示“已复制”提示showTooltip('✅ 已复制到剪贴板')}})

监听状态变化，自动触发剪贴板读写逻辑

反过来，也可以让 watchEffect 在某个响应式状态变化时，主动执行剪贴板操作：

1. 当 pendingCopyText.value 被赋新值时，自动尝试复制
2. 当 shouldPaste.value 变为 true 时，自动读取并赋值给 pasteResult.value
3. 注意：必须确保 DOM 已就绪（如在 onMounted 后启用），且用户已授予权限（navigator.clipboard 需在安全上下文和用户手势后调用）

示例：

const pendingCopyText = ref('')watchEffect(async (onInvalidate) => {if (!pendingCopyText.value) returnconst controller = new AbortController()onInvalidate(() => controller.abort())try {await navigator.clipboard.writeText(pendingCopyText.value)copiedText.value = pendingCopyText.valuependingCopyText.value = '' // 清空触发源} catch (err) {copyError.value = err.name}})

处理权限与异步边界，避免依赖丢失

watchEffect 只在同步执行阶段收集依赖。如果在 await 后读取响应式变量（如 copiedText.value），它不会被追踪。因此：

1. 所有需要响应式联动的状态（如 copiedText、copyError）必须在 await 前或 then/catch 中显式赋值
2. 权限检查应前置：if (navigator.clipboard && document.hasFocus())，否则跳过执行，避免报错中断副作用
3. 页面失焦（document.hidden）时，可暂停逻辑或延迟到可见后再执行，防止无效操作

结合 v-clipboard 指令实现声明式同步

若使用第三方指令（如 v-clipboard:copy），可将其与 watchEffect 协同：

1. 指令负责绑定点击事件并调用 writeText
2. 你用 watchEffect 监听指令内部更新的 isCopied 状态，统一控制反馈动画、按钮禁用、倒计时恢复等
3. 避免重复逻辑：指令只管“执行”，watchEffect 只管“响应”

这样既保持模板简洁，又让状态流清晰可控。