Vue 3组合式函数处理蓝牙连接的核心是用响应式数据承载状态、副作用逻辑管理生命周期、错误边界隔离不确定性；通过reactive统一状态、onBeforeUnmount清理资源、watch驱动行为、try/catch分类容错、provide/inject跨组件共享。
Vue 3 组合式函数处理蓝牙设备连接状态，核心在于**用响应式数据承载状态、用副作用逻辑管理生命周期、用错误边界隔离不确定性**。它不是简单封装 API 调用，而是把“连接”这件事建模成可观察、可响应、可复用的状态流。
用 reactive + ref 管理多维连接状态
蓝牙连接涉及多个相互关联的状态：是否已选设备、GATT 服务是否就绪、特征值是否可读写、是否正在连接中、最后断开原因等。把这些字段统一收进一个 reactive 对象，比分散定义多个 ref 更清晰、更易维护：
- 定义如
const connection = reactive({ device: null, server: null, isConnected: false, isConnecting: false, error: null }) - 所有操作（如 requestDevice、connect、getPrimaryService）都只修改这个对象，模板和逻辑层通过同一来源响应变化
- 避免用多个独立 ref（如
isConnected、isConnecting）导致状态不一致——比如连接失败时忘记重置isConnecting
用 onBeforeUnmount + watch 清理与监听联动
蓝牙连接是跨组件生命周期的长时任务，必须主动清理资源，否则可能引发内存泄漏或重复监听：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 在组合函数内部调用
onBeforeUnmount，自动断开 GATT 连接、移除 notify 回调、清除轮询定时器 - 对
connection.isConnected使用watch监听，一旦变为false就触发重连逻辑或 UI 提示，而不是靠手动 if 判断 - 监听
connection.device变化，自动执行服务发现（device.gatt.connect()→server.getPrimaryService()），形成“状态驱动行为”的链路
用 try/catch + 自定义错误类型做统一容错
蓝牙操作失败原因多样（用户拒权、设备关机、超时、服务不可用），不能只靠 .catch 打印 console：
- 在每个关键步骤（requestDevice、connect、readValue）包裹 try/catch，并将错误归类为
BluetoothError.PERMISSION_DENIED、BluetoothError.DEVICE_UNAVAILABLE等语义化类型 - 把错误信息存入
connection.error，让 UI 层用v-if="connection.error"统一展示提示，而不是在每个按钮点击里写重复逻辑 - 配合
watch检测 error 变化，自动在 5 秒后清空，避免错误态长期滞留
用 provide/inject 支持跨组件共享连接实例
一个蓝牙设备通常需要被多个子组件访问（如控制面板、状态指示、日志查看），但不应重复连接：
- 在根组合函数中创建连接实例后，用
provide('bluetooth', connection)注入上下文 - 任意子组件通过
const { connection } = inject('bluetooth')获取，确保所有地方读取的是同一份响应式状态 - 比全局变量或 Vuex 更轻量，比 props 逐层透传更简洁，天然适配 Vue 3 的依赖注入机制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
