在 Vue 3 中，provide 和 inject 是一对用于实现依赖注入的 API。它们提供了一种方式，让祖先组件能够向其所有子孙后代组件注入依赖，而无需通过 props 逐层传递。这在开发大型复杂应用时，尤其是当组件层级较深时，可以极大地简化代码和提高可维护性。
1. 基本用法
1.1 provide
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子级的属性。你可以将这些属性视为从祖先组件"提供"给后代组件的值或函数。
在 setup 函数内部使用 provide 时，需要从 vue 包中导入它。
javascript复制代码
|---|----------------------------------------|
| | import { provide, ref } from 'vue'; |
| | |
| | export default { |
| | setup() { |
| | const theme = ref('dark'); |
| | |
| | provide('theme', theme); |
| | |
| | // 其他逻辑... |
| | }, |
| | }; |
在 setup 之外，你可以直接在组件选项中定义 provide：
javascript复制代码
|---|-----------------------|
| | export default { |
| | data() { |
| | return { |
| | theme: 'dark', |
| | }; |
| | }, |
| | provide() { |
| | return { |
| | theme: this.theme, |
| | }; |
| | }, |
| | }; |
1.2 inject
inject 函数用来在子组件中接收由祖先组件通过 provide 提供的值。第一个参数是提供的 key（字符串），第二个参数是可选的默认值。
在 setup 函数中使用 inject：
javascript复制代码
|---|-----------------------------------------------------------------------------|
| | import { inject } from 'vue'; |
| | |
| | export default { |
| | setup() { |
| | const theme = inject('theme', 'light'); // 如果没有注入 'theme'，则使用默认值 'light' |
| | |
| | // 使用 theme... |
| | }, |
| | }; |
2. 高级用法
2.1 响应性
在 Vue 3 中，通过 ref、reactive 或 computed 提供的值是响应性的，意味着当提供的值改变时，任何使用 inject 接收该值的组件都将更新。
2.2 符号作为 key
为了避免 key 冲突，你可以使用 Symbol 作为 provide 和 inject 的 key。这确保了你的 provide 是唯一的，不会被其他组件意外覆盖。
javascript复制代码
|---|--------------------------------------------------------|
| | import { inject, provide, ref, Symbol } from 'vue'; |
| | |
| | const ThemeSymbol = Symbol('theme'); |
| | |
| | export default { |
| | setup() { |
| | const theme = ref('dark'); |
| | provide(ThemeSymbol, theme); |
| | // ... |
| | }, |
| | }; |
| | |
| | // 在子组件中 |
| | export default { |
| | setup() { |
| | const theme = inject(ThemeSymbol, 'light'); |
| | // 使用 theme... |
| | }, |
| | }; |
2.3 provide 的函数形式
provide 也可以是一个返回对象的函数，这在结合 setup 函数中的响应性状态时非常有用。函数将接收组件的 props 和 context 参数。
然而，通常直接在 setup 函数内部使用 provide 函数形式是不必要的，因为你可以直接访问响应性状态和函数。但如果你需要在 setup 之外定义 provide，并且需要访问组件实例（如 this），则函数形式是有用的。
不过，在 Vue 3 的组合式 API 中，你通常会直接在 setup 函数内部工作，因此不太可能需要这种用法。
3. 注意事项
- 不是响应式的值（如基本类型的字面量、普通的对象等）在传递给
provide后将不会更新子组件中的相应值，除非它们被封装成响应式对象（如使用ref或reactive）。 - 尽量避免在应用中过度使用依赖注入，因为它可以使组件间的关系变得难以追踪和理解。通常，在开发大型库或框架时，依赖注入才显得尤为有用。
provide和inject主要用于开发高阶组件、库或高级用途。在日常开发中，应优先考虑使用props和emit来传递数据和事件。- 当使用
provide和inject时，确保提供清晰的文档和类型定义（如果使用 TypeScript），以帮助其他开发者理解这些依赖是如何工作的。
4. 示例：主题切换器
下面是一个简单的例子，演示了如何使用 provide 和 inject 在 Vue 3 应用中实现主题切换功能。
祖先组件（App.vue）：
vue复制代码
|---|----------------------------------------------------------------|
| | <template> |
| | <div :class="theme"> |
| | <ThemeSwitcher /> |
| | <MainContent /> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { ref, provide } from 'vue'; |
| | import ThemeSwitcher from './components/ThemeSwitcher.vue'; |
| | import MainContent from './components/MainContent.vue'; |
| | |
| | export default { |
| | components: { |
| | ThemeSwitcher, |
| | MainContent, |
| | }, |
| | setup() { |
| | const theme = ref('light'); |
| | |
| | const toggleTheme = () => { |
| | theme.value = theme.value === 'light' ? 'dark' : 'light'; |
| | }; |
| | |
| | provide('theme', theme); |
| | provide('toggleTheme', toggleTheme); |
| | |
| | return { theme }; |
| | }, |
| | }; |
| | </script> |
| | |
| | <style> |
| | .light { |
| | background-color: white; |
| | color: black; |
| | } |
| | |
| | .dark { |
| | background-color: black; |
| | color: white; |
| | } |
| | </style> |
子组件（ThemeSwitcher.vue）：
vue复制代码
|---|-------------------------------------------------------|
| | <template> |
| | <button @click="toggleTheme">Switch Theme</button> |
| | </template> |
| | |
| | <script> |
| | import { inject } from 'vue'; |
| | |
| | export default { |
| | setup() { |
| | const toggleTheme = inject('toggleTheme'); |
| | |
| | return { toggleTheme }; |
| | }, |
| | }; |
| | </script> |
另一个子组件（MainContent.vue）：
vue复制代码
|---|----------------------------------------|
| | <template> |
| | <div> |
| | <p>This is the main content.</p> |
| | <p>Current theme: {``{ theme }}</p> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { inject } from 'vue'; |
| | |
| | export default { |
| | setup() { |
| | const theme = inject('theme'); |
| | |
| | return { theme }; |
| | }, |
| | }; |
| | </script> |
在这个例子中，App.vue 组件提供了 theme 响应式引用和 toggleTheme 函数。然后，任何子组件都可以通过 inject 来接收并使用这些值或函数。ThemeSwitcher.vue 组件注入并使用 toggleTheme 函数来切换主题，而 MainContent.vue 组件则注入并显示当前的主题。