vue 3 中蓝牙断开管理需在组件卸载前主动清理：onunmounted 中调用 disconnect()，绑定 gattserverdisconnected 事件兜底，避免 onbeforeunmount 执行异步操作，usebluetooth 应内置自动清理逻辑。
Vue 3 中管理蓝牙设备断开，关键不是“等断开再处理”，而是**在组件卸载前主动、安全地清理连接资源**。Web Bluetooth 的连接不会自动随组件销毁而关闭，若不手动断连，容易导致内存泄漏、设备残留占用、甚至下一次连接失败。
onUnmounted 中主动调用 disconnect()
这是最直接有效的做法。所有通过 useBluetooth 等组合式函数建立的连接，都应暴露 disconnect() 方法，并在组件卸载时触发：
- 在 setup() 中调用
const { connect, disconnect, isConnected } = useBluetooth() - 立即使用
onUnmounted(disconnect)—— 不需要判断isConnected，因为disconnect()内部会做状态校验和防重复调用 - 如果连接逻辑含异步（如正在 connect 中），
disconnect()应能中止待定操作，避免后续 resolve 后误触发状态更新
监听 gattserverdisconnected 事件做兜底
设备可能因信号弱、关机或超时被系统强制断连，前端无法感知。必须在连接成功后，为 server 绑定一次性的断连监听器：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
server.addEventListener('gattserverdisconnected', handleDisconnect)-
handleDisconnect中执行状态重置（isConnected.value = false）、清除 characteristic 监听、通知上层（如 emit 'disconnected'） - 注意：该事件只触发一次，且不会自动移除；应在
disconnect()执行时手动removeEventListener，防止多次绑定
避免 onBeforeUnmount 做耗时清理
onBeforeUnmount 是同步钩子，不适合执行 await device.gatt.disconnect() 这类异步操作——它不等待 Promise 完成就会继续卸载流程。
- 不要写
await disconnect()在onBeforeUnmount里 - 正确做法是把异步清理逻辑放在
onUnmounted（它支持异步函数），或在disconnect()内部用finally确保状态归零，不强求等待底层断连完成 - 真正需要同步保障的，只有移除事件监听器、清空定时器、取消未完成的 fetch 等
配合 useBluetooth 的自动清理设计
高质量的 useBluetooth 组合式函数本身应内置生命周期协同能力：
- 内部调用
onUnmounted(() => { if (server.value) server.value.disconnect(); device.value = null; }) - 对
requestDevice返回的device对象，在disconnect()或 unmount 时调用device?.close()（部分浏览器支持） - 将
gattserverdisconnected监听器与serverref 绑定，确保每次新连接后监听器唯一
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
