// useUserStatus.js - 这是一个组合式函数
import { ref, onMounted, onUnmounted } from 'vue'

export function useUserStatus() {
  // 1. 创建响应式数据
  const isOnline = ref(false)

  // 2. 定义方法
  function updateOnlineStatus() {
    isOnline.value = navigator.onLine
  }

  // 3. 在组件挂载时设置监听
  onMounted(() => {
    window.addEventListener('online', updateOnlineStatus)
    window.addEventListener('offline', updateOnlineStatus)
    // 初始化状态
    updateOnlineStatus()
  })

  // 4. 在组件卸载时移除监听，防止内存泄漏
  onUnmounted(() => {
    window.removeEventListener('online', updateOnlineStatus)
    window.removeEventListener('offline', updateOnlineStatus)
  })

  // 5. 返回所有需要在模板中使用的数据和方法
  return {
    isOnline
  }
}

// MyComponent.vue
<script setup>
import { useUserStatus } from './useUserStatus'

// 调用函数，获取返回的数据
const { isOnline } = useUserStatus()
</script>

<template>
  <div>用户状态: {{ isOnline ? '在线' : '离线' }}</div>
</template>

来源一清二楚：在组件里，你通过 import 和函数调用，明确地知道 isOnline 来自 useUserStatus 这个函数。

解决命名冲突：如果两个函数返回了同名的数据，你可以轻松地重命名。

const { isOnline: userIsOnline } = useUserStatus()
const { isOnline: deviceIsOnline } = useDeviceStatus()

逻辑可以自由组合：相关的功能（比如用户状态和权限检查）可以写成独立的函数，然后在组件里像搭积木一样组合起来，所有代码都在一起，非常利于阅读和维护。

TypeScript 支持极佳：因为一切都是函数，输入和输出的类型可以被 TypeScript 完美地推断出来，给你准确的代码提示。

代码更容易复用和测试：组合式函数就是一个普通的 JavaScript 函数，你可以更容易地把它用在其他地方，或者单独进行测试。

// usePermissions.js
export function usePermissions() {
  // ... 权限相关的逻辑
  const hasPermission = (code) => { /* ... */ }
  return { hasPermission }
}

// useTrading.js
export function useTrading(permissionsHelper) {
  // 明确地要求传入一个权限检查工具
  const { hasPermission } = permissionsHelper

  function executeTrade() {
    // 这里可以清晰地看到 hasPermission 是从外面传进来的
    if (hasPermission('TRADE_EXECUTE')) {
      // 执行交易
    }
  }
  return { executeTrade }
}

// 在组件中使用
<script setup>
import { usePermissions } from './usePermissions'
import { useTrading } from './useTrading'

// 组合各个函数
const { hasPermission } = usePermissions()
const { executeTrade } = useTrading({ hasPermission }) // 显式传递依赖

</script>