用 ref 实现组件间状态共享的核心是将响应式数据抽到组件外部，多个组件共用同一 ref；可通过独立文件导出 ref、封装为 composable 函数或结合 provide/inject 实现跨层级共享，适用于简单低耦合场景。
用 ref 实现组件间状态共享，核心思路是“抽出响应式数据到组件外部”，让多个组件共同引用同一个 ref，而非各自维护副本。这不需要引入 Pinia 或 Vuex，适合小规模、低耦合的状态协作场景（比如表单联动、开关同步、计数器共享等）。
把 ref 提到公共作用域
最直接的方式是将 ref 定义在组件文件之外（如一个独立的 shared-state.ts），然后在需要的组件中导入使用：
- 创建一个模块导出 ref，例如：
export const sharedCount = ref(0) - 在组件 A 中：`import { sharedCount } from './shared-state';`，直接读写 `sharedCount.value`
- 在组件 B 中同样导入并使用，修改任一组件都会触发另一组件的响应式更新
用 composable 封装可复用的共享逻辑
比裸露 ref 更健壮的做法是封装成组合式函数，隐藏细节并提供语义化 API：
- 定义
useSharedToggle()，内部返回同一个ref(true)和toggle()方法 - 各组件调用该函数，拿到的是同一份响应式状态和操作能力，不暴露底层 ref
- 还能扩展逻辑，比如加日志、防抖、权限校验等，不影响使用者
配合 provide/inject 实现跨层级共享（无 props 穿透）
当状态需从父组件“注入”给深层子组件，又不想层层透传 props 时，可用 provide + inject 结合 ref：
- 父组件中：
provide('sharedRef', countRef) - 任意深层子组件中：
const countRef = inject('sharedRef') as Ref<number></number> - 注意：inject 返回值需类型断言，且要确保 provide 在 setup 早期执行（不能放在条件分支里）
注意事项与边界
这种轻量方案不是万能的，适用前请确认：
- 状态变更逻辑简单，无复杂依赖或副作用（否则建议上 Pinia）
- 共享范围可控——全局 ref 容易导致隐式耦合，优先按功能域拆分（如
useSearchState()、useThemeRef()） - 避免循环引用：不要在 shared ref 的 getter/setter 中再调用另一个 shared ref，容易引发无限更新
- SSR 场景下注意服务端与客户端 ref 初始值一致性（例如用
useState或首次渲染后初始化）
