Vue 3 Composition API中向composables传递响应式props的推荐方案是什么

直接将响应式变量作为入参传入是官方推荐的常规实现，完全可行，你可以根据业务场景选以下两种方式：

• 普通场景直接传ref/reactive对象本身即可，composables内部可以直接复用该变量的响应性，不需要额外拆包，逻辑最直观可追溯，适合大部分业务需求：

// 主应用侧调用
const pageNum = ref(1)
const { dataList } = usePagination(pageNum)

• 如果要避免composables直接修改外部的响应式变量，或者需要传入动态的响应式表达式，可以用getter函数的形式传入，对外部变量的保护性更强，也更灵活：

// 仅传入读取逻辑，composables无法直接修改外层的pageNum
const { dataList } = usePagination(() => pageNum.value)

如果是全局通用的共享响应式变量（比如用户登录态、全局主题配置），还可以用provide/inject跨层级传递，不需要每个composables重复传参，适合多组件、多composables共用的全局状态场景。

composables本质就是普通的JavaScript函数，所以调用逻辑和普通函数没有本质区别：

• 调用其他composables：直接在当前composables内部导入并调用即可，嵌套调用是组合式API的核心设计，你可以根据逻辑拆分任意多的小粒度composables，再在需要的地方组合使用即可，比如在useUserOrder内部可以同时调用useUser获取用户信息、useOrder获取订单逻辑，再组合成新的业务逻辑。
• 调用应用的全局/其他方法，分两种场景处理：
  1. 如果是仅少数composables用到的业务方法，优先将方法作为入参传入composables，逻辑最清晰，也不会让composables和全局环境硬绑定，方便后续复用和单元测试。
  2. 如果是所有composables通用的全局方法（比如全局请求实例、全局提示方法），可以在composables内部通过getCurrentInstance()获取当前组件实例，再读取挂载到全局的方法，也可以提前将全局方法通过provide注入，在composables内用inject读取即可。

注意：如果是封装要跨项目复用的公共composables，尽量不要直接依赖全局环境，优先通过入参传入依赖的方法和变量，可移植性会好很多。

内容的提问来源于stack exchange，提问作者Luca Reghellin