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 来在你的组件树中传递数据和方法。
  1. 使用 provide 在祖先组件中提供数据或方法。
  2. 使用 inject 在后代组件中接收这些数据或方法。
  3. 确保你的组件树结构允许依赖注入（即，不要在函数式组件或不支持注入的上下文中使用 inject）。