Vue 3 中跨组件代码复用的核心方式是封装组合式函数（自定义 Hook），即把响应式状态、方法、生命周期等聚合在可导出函数中，按功能抽离为独立 .js 文件，支持参数化、嵌套组合及 provide/inject 跨层级共享。

Vue 3 中 Composition API 实现跨组件代码复用，核心方式是封装 组合式函数（Composable Functions），也就是常说的 “自定义 Hook”。它不是靠 props 或事件传递逻辑，而是把响应式状态、方法、生命周期钩子等聚合在一个函数里，导出后在任意组件中直接调用。

按功能抽离为独立的 .js 文件

把通用逻辑（如数据获取、表单校验、加载状态、权限控制）写成一个可导出的函数。例如封装一个 useUserFetch：

• 在 composables/useUserFetch.js 中定义：

import { ref, onMounted } from 'vue'
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> 组件都可以引入并调用，彼此状态完全隔离：

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') 获取，无需层层透传