provide 和 inject 是 Vue 3 中实现跨层级组件通信的强大工具。它们允许祖先组件向其所有后代组件“广播”数据或方法，而无需通过逐层 props 传递，解决了“props drilling”（属性层层传递）的痛点。更重要的是，Vue 的 provide/inject 天然支持响应式穿透，这是其核心优势。

---

一、核心概念：依赖注入（Dependency Injection）

provide 和 inject 遵循“依赖注入”设计模式：

• provide：祖先组件“提供”数据。
• inject：后代组件“注入”并使用数据。

这种模式将组件间的直接依赖（通过 props）转变为间接依赖（通过“上下文”），提高了组件的复用性和灵活性。

---

二、基本用法

1. 祖先组件：使用 provide

<!-- Parent.vue -->
<script setup>
import { ref, provide } from 'vue';
import Child from './Child.vue';

const theme = ref('dark');
const updateUser = (user) => { /* ... */ };

// 提供响应式数据和方法
provide('theme', theme);
provide('updateUser', updateUser);
</script>

<template>
  <Child />
</template>

2. 后代组件：使用 inject

<!-- DeepChild.vue (可以是 Child 的子组件的子组件...) -->
<script setup>
import { inject } from 'vue';

// 注入数据
const theme = inject('theme');
const updateUser = inject('updateUser');

// 可以直接使用
console.log(theme.value); // 'dark'
</script>

<template>
  <div :class="theme.value">Theme is {{ theme.value }}</div>
</template>

关键点：DeepChild 无需知道 theme 来自哪一层祖先，只要路径上有组件提供了 'theme'，它就能获取。

---

三、实现原理：响应式穿透

provide/inject 的魔力在于其响应式穿透能力。即使 inject 发生在组件初始化时，后代组件也能响应祖先组件提供的数据变化。

1. 响应式数据的“穿透”机制

• 提供时（provide）：

  • 你 provide 的是一个 ref 或 reactive 对象。
  • Vue 并不复制或序列化这个对象，而是将原始的响应式引用存入当前组件的 provides 对象中。

• 注入时（inject）：

  • inject 函数沿着组件树向上查找，找到最近的 provide。
  • 它返回的是同一个响应式对象的引用，而不是副本。

// 伪代码：provide 内部
currentInstance.provides[key] = value; // 存储原始引用

// 伪代码：inject 内部
let provides = currentInstance.parent.provides;
while (provides) {
  if (provides[key] !== undefined) {
    return provides[key]; // 返回原始引用
  }
  provides = provides.parent.provides;
}

2. 为什么能响应式？

因为 inject 得到的是一个 ref 或 reactive 对象：

• 当在模板中使用 theme.value 时，render 函数会访问 theme.value。
• 这触发了 ref 的 get 拦截器，track 函数将当前组件（DeepChild）作为 theme 的依赖。
• 当祖先组件修改 theme.value 时，trigger 通知所有依赖（包括 DeepChild），触发其重新渲染。

本质上，provide/inject 只是传递了响应式对象的引用，真正的响应式机制由 ref/reactive 提供。

---

四、如何绕过 props 传递？

provide/inject 绕过 props 的关键在于：

1. 不依赖父子关系：

   • props 只能在直接父子组件间传递。
   • provide/inject 基于组件树的层级结构，任何后代都可以注入祖先提供的数据，无论中间隔了多少层。

2. 基于“上下文”查找：

   • inject 不是通过参数接收，而是通过一个字符串或 Symbol 键，在组件树的 provides 链上查找。
   • 这类似于“全局变量”，但作用域限定在组件树的子树内。

3. 解耦组件：

   • 后代组件不需要知道数据来源，只需知道“契约”（即注入的键名）。
   • 祖先组件可以随时改变数据，所有注入该数据的后代都会自动更新。

---

五、响应式穿透的实践：可变 vs 不可变

1. 提供 Ref（推荐）

// 祖先
const count = ref(0);
provide('count', count);

// 后代
const count = inject('count');
count.value++; // 直接修改，祖先和其他后代都能看到

• 优点：天然响应式，修改同步。
• 缺点：后代可以直接修改状态，可能破坏封装。

2. 提供 Reactive 对象

// 祖先
const state = reactive({ count: 0 });
provide('state', state);

// 后代
const state = inject('state');
state.count++; // 修改

同上。

3. 提供不可变值 + 方法（更安全）

// 祖先
const count = ref(0);
const increment = () => count.value++;
provide('count', readonly(count)); // 只读
provide('increment', increment);

// 后代
const count = inject('count');
const increment = inject('increment');
// count.value++; // ❌ 错误！只读
increment(); // ✅ 正确，通过方法修改

• 优点：控制状态修改，避免意外变更。
• 推荐模式：适用于复杂状态管理。

---

六、Symbol 作为注入键

为了避免命名冲突，推荐使用 Symbol 作为 provide/inject 的键。

// keys.js
export const ThemeKey = Symbol('theme');
export const UserKey = Symbol('user');

// Parent.vue
import { ThemeKey } from './keys';
provide(ThemeKey, theme);

// DeepChild.vue
import { ThemeKey } from './keys';
const theme = inject(ThemeKey);

• Symbol 是唯一的，确保不会与其他库或组件的键冲突。

---

七、与全局状态管理（Pinia）的区别

特性	provide/inject	Pinia
作用域	局部（组件子树）	全局
持久性	组件树销毁时失效	持久（可跨路由）
调试	难（非集中式）	易（Devtools 支持）
适用场景	组件库、主题、配置	应用级状态（用户、购物车）

provide/inject 更适合组件内部或组件库的上下文传递，而 Pinia 适合应用级状态。

---

八、响应式穿透的陷阱

1. 过度使用：

   • 不要滥用 provide/inject 作为“全局变量”。
   • 简单的父子通信仍用 props/emit。

2. 调试困难：

   • 数据流不直观，难以追踪。

3. 循环依赖：

   • 注意不要在 provide 和 inject 之间形成循环。

---

九、总结

provide/inject 的实现原理可以归结为：

1. 引用传递：provide 存储响应式对象的引用，inject 获取同一引用。
2. 响应式继承：由于传递的是 ref/reactive，后代组件能自动响应变化（响应式穿透）。
3. 层级查找：inject 沿组件树向上查找，绕过中间组件的 props 传递。
4. 契约式通信：通过键（字符串/Symbol）建立“提供-注入”契约。

provide/inject 是 Vue 中实现高内聚、低耦合组件通信的利器。正确使用它，你可以构建出灵活、可复用的组件库和应用架构，同时享受响应式系统带来的便利。