vue.js跨组件状态共享需共享同一响应式引用：①provide/inject配reactive对象，用symbol键防冲突，inject后用torefs保响应性；②es模块导出全局ref/reactive；③组合式函数usexxx封装状态与逻辑，支持ts类型推导；须避免解构赋值、普通对象注入等导致响应式失效。
Vue.js 跨组件状态共享要真正响应式，关键不是“传数据”，而是“共享同一份响应式引用”。只要多个组件访问的是同一个 ref 或 reactive 实例，修改就会自动同步，无需手动触发更新。
用 provide/inject 共享 reactive 对象（适合嵌套组件）
这是最贴近 Vue 设计哲学的轻量方案，天然支持深层嵌套、方法调用和响应式更新。
- 在顶层组件（如 App.vue）中创建 reactive 状态，并通过 provide 注入，key 推荐用 Symbol 避免冲突
- 后代任意层级组件用 inject 获取，可直接读写属性或调用内部方法（如 toggleTheme()）
- 注意：inject 返回的是响应式代理，解构时建议用 toRefs 或保持对象访问，避免丢失响应性
- 适合主题配置、表单上下文、用户会话等“一对多”且有明确祖先链路的场景
导出全局 reactive/ref（适合小项目或局部共享）
利用 ES 模块单例特性，直接在 JS 文件中定义并导出响应式变量，所有导入处指向同一内存地址。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章