useNetwork

监控网络连接状态和质量，包括在线/离线状态、网络类型和连接速度。

前置依赖

依赖参数

参数名	类型	说明
deps.vue.ref	<T>(value: T) => Ref<T>	Vue ref 函数
deps.vue.onMounted	(fn: () => void) => void	Vue onMounted 钩子
deps.vue.onUnmounted	(fn: () => void) => void	Vue onUnmounted 钩子
deps.navigator	NavigatorWithOnline	Navigator API（包含 onLine 属性）
deps.window	WindowWithOnlineStatus	Window 对象（用于监听在线/离线事件）

环境要求

浏览器 API: Network Information API, Online/Offline Events

函数签名

function useNetwork(
  deps: UseNetworkDeps
): UseNetworkReturn

interface UseNetworkDeps {
  vue: VueCompositionAPI
  navigator: NavigatorWithOnline
  window: WindowWithOnlineStatus
}

interface UseNetworkReturn {
  isSupported: Ref<boolean>
  isOnline: Ref<boolean>
  type: Ref<NetworkInformation['type'] | undefined>
  effectiveType: Ref<NetworkInformation['effectiveType'] | undefined>
  downlink: Ref<number | undefined>
  downlinkMax: Ref<number | undefined>
  rtt: Ref<number | undefined>
  saveData: Ref<boolean | undefined>
}

参数

参数名	类型	必填	说明
deps	UseNetworkDeps	是	依赖注入对象

返回值

属性	类型	说明
isSupported	Ref<boolean>	是否支持网络信息 API
isOnline	Ref<boolean>	是否在线
type	Ref<string | undefined>	网络类型（wifi、cellular、ethernet 等）
effectiveType	Ref<string | undefined>	有效网络类型（4g、3g、2g、slow-2g）
downlink	Ref<number | undefined>	下行速度 (Mbps)
downlinkMax	Ref<number | undefined>	最大下行速度 (Mbps)
rtt	Ref<number | undefined>	往返时间 (ms)
saveData	Ref<boolean | undefined>	是否启用省流量模式

网络类型

type（网络类型）

• wifi - Wi-Fi 连接
• cellular - 移动网络
• ethernet - 以太网
• bluetooth - 蓝牙
• none - 无连接
• other - 其他
• unknown - 未知

effectiveType（有效网络类型）

• 4g - 优秀（快速连接）
• 3g - 良好（中等连接）
• 2g - 一般（慢速连接）
• slow-2g - 较差（极慢连接）

工作原理

1. 检查是否支持网络信息 API（navigator.connection）
2. 监听 online 和 offline 事件更新在线状态
3. 监听 change 事件更新网络信息
4. 所有状态实时响应式更新
5. 组件卸载时移除所有事件监听器

可用于：

• 根据网络状况调整内容加载策略
• 在离线时显示提示信息
• 在慢速网络下降低图片质量
• 尊重用户的省流量设置