Vue3 组合式 API：依赖注入（四）
provide()
provide() 函数是用于依赖注入的一个关键部分。这个函数允许你在组件树中提供一个值或对象，使得任何子组件（无论层级多深）都能够通过 inject() 函数来访问这些值。
import { provide, ref } from 'vue'; export default { setup() { const count = ref(0); provide('count', count); // 提供一个响应式引用 // ... //使用 Symbol 作为键const countKey = Symbol('count'); // 在父组件中 provide(countKey, ref(0)); // 在子组件中 const count = inject(countKey);}
};
inject()
inject() 函数是依赖注入机制的一部分，允许组件从其祖先组件中“注入”数据或功能。这与 provide() 函数配合使用，后者负责在祖先组件中提供数据或功能。
<script setup>
import { inject } from 'vue'
import { countSymbol } from './injectionSymbols'// 注入不含默认值的静态值
const path = inject('path')// 注入响应式的值
const count = inject('count')// 通过 Symbol 类型的 key 注入
const count2 = inject(countSymbol)// 注入一个值，若为空则使用提供的默认值
const bar = inject('path', '/default-path')// 注入一个值，若为空则使用提供的函数类型的默认值
const fn = inject('function', () => {})// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('factory', () => new ExpensiveObject(), true)
</script>
hasInjectionContext()
- hasInjectionContext() 并不是一个直接暴露给开发者的函数。这个函数主要是 Vue 内部用于检查当前组件的上下文（context）是否支持依赖注入（provide/inject）的。然而，对于大多数开发者来说，通常不需要直接使用这个函数，因为它更多地是 Vue 内部实现的一部分。
- 为了更深入地理解 Vue 的依赖注入机制，我们可以简单了解一下 hasInjectionContext() 的作用和它在 Vue 内部可能的工作方式。
- 在 Vue 3 中，provide 和 inject 允许你在组件树中传递数据或方法，而不需要显式地通过 props 或 events 来进行父子组件之间的通信。当某个组件通过 provide 提供了一个值，任何后代组件都可以使用 inject 来接收这个值。
- 虽然开发者不直接使用 hasInjectionContext()，但这个函数可能在 Vue 内部用于确定当前组件是否处于可以接收注入的上下文中。例如，在一个函数式组件或纯渲染组件中，可能不支持依赖注入，因为这样的组件可能没有完整的组件实例或上下文。
- 作为开发者，你通常不需要直接调用 hasInjectionContext()。相反，你应该关注如何正确地使用 provide 和 inject 来在你的组件树中传递数据和方法。
- 使用 provide 在祖先组件中提供数据或方法。
- 使用 inject 在后代组件中接收这些数据或方法。
- 确保你的组件树结构允许依赖注入（即，不要在函数式组件或不支持注入的上下文中使用 inject）。