vue 3 中跨组件代码复用的核心方式是封装组合式函数（自定义 hook），即把响应式状态、方法、生命周期等聚合在可导出函数中，按功能抽离为独立 .js 文件，支持参数化、嵌套组合及 provide/inject 跨层级共享。
Vue 3 中 Composition API 实现跨组件代码复用，核心方式是封装 组合式函数（Composable Functions），也就是常说的 “自定义 Hook”。它不是靠 props 或事件传递逻辑，而是把响应式状态、方法、生命周期钩子等聚合在一个函数里，导出后在任意组件中直接调用。
按功能抽离为独立的 .js 文件
把通用逻辑（如数据获取、表单校验、加载状态、权限控制）写成一个可导出的函数。例如封装一个 useUserFetch：
- 在
composables/useUserFetch.js中定义：
export function useUserFetch(userId) {
const user = ref(null)
const loading = ref(false)
const error = ref(null)
const fetch = async () => {
loading.value = true
try {
const res = await fetch(`/api/users/${userId}`)
user.value = await res.json()
} catch (e) {
error.value = e
} finally {
loading.value = false
}
}
onMounted(fetch)
return { user, loading, error, fetch }
}
在多个组件中直接导入使用
只要逻辑需要，任何 <script setup></script> 组件都可以引入并调用，彼此状态完全隔离：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 组件 A：
const { user, loading } = useUserFetch('101') - 组件 B：
const { user, loading } = useUserFetch('205') - 每个调用都创建独立的 ref 和副作用，互不影响
支持参数化与组合嵌套
组合式函数可以接收配置参数，也能互相调用，形成逻辑分层：
- 比如
usePagination内部可调用useApi处理请求 - 可传入默认页码、每页条数、是否自动加载等选项
- 返回的变量和方法可按需解构，不强制全量使用
配合 provide/inject 实现跨层级共享（进阶场景）
当多个子组件需要共用同一份状态（如全局搜索上下文），可在父组件中调用组合函数，再用 provide 注入：
- 父组件调用
const searchState = useSearch() - 执行
provide('search', searchState) - 任意深层子组件用
inject('search')获取，无需层层透传
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
