provide/inject 是 vue 跨层级响应式状态共享方案，需用 ref/reactive 包装值，推荐 symbol 作 key，适合封装为可复用模块，但仅限单个 vue 实例内有效。
Vue.js 的 provide/inject 是实现轻量级跨层级状态共享最直接、低侵入的方式——它不依赖额外库，不破坏组件封装性，只要父子关系成立，就能让深层子组件“感知”到祖先提供的响应式数据。
核心要点：必须用响应式包装
provide 的值若不是 ref、reactive 或 computed，注入后将失去响应性。常见错误是直接 provide 普通对象或字符串：
- ✅ 正确写法：
provide('theme', reactive({ color: 'blue', fontSize: '14px' })) - ✅ 或用 ref：
const count = ref(0); provide('count', count) - ❌ 错误写法：
provide('theme', { color: 'blue' })（后续修改不会触发更新）
推荐用 Symbol 作 key 避免冲突
字符串 key 容易重名，尤其在多个模块共用时。Symbol 是唯一标识，更安全：
const themeKey = Symbol('theme')- 祖先中：
provide(themeKey, { color: ref('red') }) - 后代中：
const { color } = inject(themeKey)
适合封装成可复用的状态模块
把逻辑集中管理，避免每个父组件重复 provide：
- 新建
stores/theme.js，导出provideTheme(app)函数 - 在 main.js 中统一调用：
app.provide('theme', reactive({...})) - 任意子组件只需
inject('theme')即可接入，类似微型 Pinia
注意边界：仅限单个 Vue 实例内有效
provide/inject 无法穿透微前端子应用、iframe 或不同 createApp() 实例。它只在真实组件树中流动：
- ✅ 同一 App 内：Layout → Sidebar → MenuItem → Icon，全部能 inject
- ❌ 主应用 provide → qiankun 加载的子应用组件 → 无法 inject 到
- 微前端场景请改用 CustomEvent、主应用暴露 store 或框架全局状态 API
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
