Vue 3 传感器封装核心是将原生监听、响应式状态、权限兼容性统一收进组合式函数：useDeviceOrientation 封装方向传感器，自动注册/移除事件并处理 isAbsolute 兼容性；usePageLeave 检测页面离开，通过事件组合精准判断且 SSR 友好；自定义 Hook 需统一命名、ref 包裹、前置权限检查、支持启停与错误边界；多传感器可高阶组合、computed 融合、抽离共享逻辑，并适配 KeepAlive 生命周期。

Vue 3 处理传感器监听的通用封装，核心是把原生事件监听、状态响应化、权限与兼容性兜底这三件事收进组合式函数里，让业务组件只关心“我要用什么数据”，不操心“怎么拿到、什么时候失效、桌面端怎么办”。

用 useDeviceOrientation 封装方向传感器

这是最典型的传感器封装示例。它把 DeviceOrientationEvent 的一次性回调，转成 alpha、beta、gamma、isAbsolute 四个持续可读的响应式 ref：

• 自动在 onMounted 中注册 deviceorientation 事件，onUnmounted 自动移除，避免内存泄漏
• 内部判断 isAbsolute 是否可用（iOS Safari 需用户手势触发后才返回 true），业务层可据此控制 UI 提示或降级逻辑
• 桌面浏览器默认不触发该事件，函数会静默保持初始值（0, 0, 0, false），不会报错或中断渲染
• 返回值是标准 ref，可直接在模板中使用 {{ alpha }}，也可在 watch 中响应变化

用 usePageLeave 封装页面离开检测

它监听的是鼠标是否移出整个浏览器窗口，不是某个元素，适用于挽留弹窗、防误关页等场景：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 底层混合使用 mouseout、mouseleave 和 mouseenter，通过 relatedTarget 判断是否真的离开页面，而非进入 iframe 或地址栏
• 返回一个 shallowRef，轻量且不可被意外赋值，保障状态只由内部逻辑驱动
• 对 SSR 友好：服务端渲染时默认为 false，客户端激活后才开始监听
• 支持在 watch 中捕获离开瞬间，比如触发日志上报或暂停定时任务

自定义传感器 Hook 的关键要点

如果 VueUse 没覆盖你的硬件传感器（如陀螺仪、光线、磁力计），自己封装时要注意：

• 命名统一以 use 开头，例如 useLightLevel，符合 Vue 生态约定
• 用 ref 包裹原始值，不用 reactive 对象——避免解构后丢失响应性
• 权限检查必须前置：调用 navigator.permissions.query 或检查 API 是否存在，失败时返回默认值并记录 warn
• 监听器要支持动态启停：暴露 start() 和 stop() 方法，方便页面切换时手动控制资源
• 加一层错误边界：原生传感器 API 报错（如 iOS 未授权）不能导致组件崩溃，应重置状态并触发可监听的 error ref

组合与复用：不止于单个传感器

真实业务往往需要多个传感器协同，比如 AR 应用同时依赖方向 + 陀螺仪 + 设备位移：

• 可创建高阶组合函数，如 useAROrientation()，内部同时调用 useDeviceOrientation() 和 useDeviceMotion()
• 用 computed 融合多源数据，比如计算设备朝向角的平滑均值，过滤抖动
• 把共享逻辑（如权限请求弹窗、离线降级策略）抽成独立的 useSensorPermission()，供所有传感器 Hook 复用
• 配合 onDeactivated/onActivated 在 KeepAlive 场景下暂停/恢复监听，节省电量

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