inject用于子孙组件接收祖先组件provide的数据，实现跨层级依赖注入；需用相同key匹配，响应式数据须用ref或reactive包裹，支持默认值、symbol键及typescript类型推导。
在 Vue 中，inject 函数用于在子孙组件中接收由祖先组件通过 provide 提供的数据，实现跨层级的依赖注入。它不依赖 props 逐层传递，适合共享配置、全局状态、工具实例等场景。
基本用法：inject 接收 provide 的值
祖先组件调用 provide 暴露数据，子孙组件用 inject 获取。两者需使用相同的 key（字符串或 Symbol）匹配：
-
祖先组件（如 App.vue 或 Layout.vue）：
使用provide声明可被注入的数据，支持响应式（推荐用ref或reactive） -
子孙组件（任意深度的子、孙、曾孙等）：
在setup()中调用inject(key)获取值；若 key 不存在，默认返回undefined，也可传入默认值
响应式注入：保持数据更新同步
直接 provide 普通对象或原始值，inject 后不会响应式更新。要确保响应性，必须提供响应式引用：
- 用
ref或reactive包裹数据再 provide - inject 得到的是响应式引用本身，可直接解构其
.value（ref）或直接访问属性（reactive） - 示例：
祖先中：provide('count', ref(0))
子孙中：const count = inject('count'); console.log(count.value);
安全写法：避免未提供时出错
如果祖先未 provide 对应 key，inject('key') 返回 undefined，直接访问可能报错。推荐以下方式防御：
- 传入默认值：
inject('apiClient', null)或inject('theme', { mode: 'light' }) - 配合
default参数 + 工厂函数（避免默认值被意外共享）：inject('store', () => createStore()) - 运行时校验（开发环境提示）：
if (!api) throw new Error('Missing required injection: api')
类型提示（TypeScript）与 Symbol Key
为避免字符串 key 冲突和提升类型安全，推荐用唯一 Symbol 作为注入 key：
- 定义：
export const MyKey = Symbol('MyKey') - provide：
provide(MyKey, value) - inject：
const value = inject(MyKey) - TypeScript 下能自动推导类型，且 IDE 可跳转追踪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
