0Pricing
Frontend Academy · 课时

使用 provide() 和 inject() 实现依赖注入

在祖先组件中提供值，并在组件树的深层位置注入这些值，无需完整的状态管理库即可避免属性逐层传递。

使用 provide() 和 inject() 实现依赖注入 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

属性逐层传递的问题

有时数据位于较高层的组件中，却需要传递给深层后代。让数据经过每个中间组件传递（属性逐层传递）既繁琐又脆弱。

provide() — 声明值

祖先组件在 setup() 中调用 provide(key, value)。这样，该值对所有后代组件都可用。

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

const theme = ref('dark');
provide('theme', theme);
</script>

inject() — 使用值

任意后代组件都可以调用 inject(key) 来读取该值。

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
</script>

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

使用 ref/reactive 实现响应式

如果提供的是 ref 或 reactive 对象，后代组件会获得响应式值，更新会自动向下传递。

// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);

// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactive

使用 Symbol 键避免冲突

在大型 app 中，字符串键可能发生冲突。Symbol 可保证唯一性，请将它们定义在共享文件中。

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

// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);

TypeScript 支持

使用 InjectionKey<T> 为两端提供类型安全。

import type { InjectionKey, Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

// Provider:
provide(ThemeKey, ref('dark'));

// Consumer (type-checked):
const theme = inject(ThemeKey); // Ref<string> | undefined

默认值

如果没有祖先组件提供该键，inject 会返回 undefined，除非您传入默认值。

const theme = inject('theme', 'light'); // default if missing
const lazy  = inject('user', () => createDefaultUser(), true); // factory

只读提供值

为防止后代组件修改共享状态，请使用 readonly() 进行包装。

import { readonly } from 'vue';

const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutate

应用级 provide

在应用级别提供值，使其在任何地方都可用，这对插件很有帮助。

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.provide('apiClient', new ApiClient());
app.mount('#app');

组合式函数包装器

将 provide/inject 包装在组合式函数中，可以提供更简洁的使用者 API。

// useTheme.ts
import { inject, type InjectionKey, type Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

export function useTheme() {
  const theme = inject(ThemeKey);
  if (!theme) throw new Error('useTheme: no provider in tree');
  return theme;
}

provide/inject 与 Pinia

provide/inject：轻量、无需库，非常适合插件式值（theme、区域设置、当前用户）。Pinia：完整的状态管理，支持 DevTools，适合处理具有复杂更新逻辑的全局响应式状态。

快速检查

在大型 Vue app 中使用 provide/inject 时，避免键冲突的推荐方式是什么？

回顾：provide/inject

祖先组件提供，后代组件注入——无需属性逐层传递。响应式值（ref/reactive）会以响应式方式传播。使用 Symbol 键和 InjectionKey 可以实现类型安全且无冲突的注入。将默认值作为 inject 的第二个参数传入。使用 readonly() 防止修改。通过应用级 provide 为跨应用插件提供值。这是插件式值的轻量级 Pinia 替代方案。

常见问题解答

「使用 provide() 和 inject() 实现依赖注入」课时是免费的吗？

是的 — 「使用 provide() 和 inject() 实现依赖注入」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「使用 provide() 和 inject() 实现依赖注入」这节课中我会学到什么？

在祖先组件中提供值，并在组件树的深层位置注入这些值，无需完整的状态管理库即可避免属性逐层传递。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「使用 provide() 和 inject() 实现依赖注入」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 provide() 和 inject() 实现依赖注入
  2. 异步组件与 Suspense
  3. 自定义指令
  4. 插件系统：app.use()
← 返回 Frontend Academy