Vue3.0进阶之依赖注入探秘

在以上示例中，在 Provider 组件内通过 provide 函数配置了数据，而在 Consumer 组件中通过 inject 函数获取 Provider 组件中已配置的数据。需要注意的是，示例中的 Consumer 组件是作为 Provider 组件的孙组件。因此，通过使用 provide/inject 提供的依赖注入功能，我们实现了数据的跨层级传递。

介绍完 provide 和 inject 函数的基本使用之后，接下来阿宝哥将带大家一起来揭开它们背后的秘密。

二、Provide 函数

在分析 provide 函数之前，我们先来回顾一下它的用法：

 
 
 
 

  
  
  
  
const Provider = { 
  
  
  
  
  setup() { 
  
  
  
  
    provide('name', '阿宝哥') 
  
  
  
  
    return () => h(Middle) 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

该函数被定义在 runtime-core/src/apiInject.ts 文件中：

 
 
 
 

  
  
  
  
// packages/runtime-core/src/apiInject.ts 
  
  
  
  
export interface InjectionKey extends Symbol {} 
  
  
  
  
 
  
  
  
  
export function provide(key: InjectionKey | string | number, value: T) { 
  
  
  
  
  if (!currentInstance) { 
  
  
  
  
    if (__DEV__) { 
  
  
  
  
      warn(`provide() can only be used inside setup().`) 
  
  
  
  
    } 
  
  
  
  
  } else { 
  
  
  
  
    let provides = currentInstance.provides 
  
  
  
  
    // 默认情况下，组件实例会继承于它父组件实例的 provides 对象，当它需要为本身提供 
  
  
  
  
    // 值是，它将使用父组件的 provides 对象作为原型对象来创建属于它自己的 provides 
  
  
  
  
    // 对象。这样的话，`inject` 函数就可以简单地从直接父对象中查找需注入的值，并让原型链 
  
  
  
  
    // 来完成这个工作。 
  
  
  
  
    const parentProvides = 
  
  
  
  
      currentInstance.parent && currentInstance.parent.provides 
  
  
  
  
    if (parentProvides === provides) { 
  
  
  
  
      provides = currentInstance.provides = Object.create(parentProvides) 
  
  
  
  
    } 
  
  
  
  
    // TS 不允许使用 symbol 作为索引类型 
  
  
  
  
    provides[key as string] = value 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

通过观察以上的代码，我们可以得出以下结论：

• provide 函数只能使用在组合式 API 的 setup 函数中。
• 组件实例上会有一个 provides 属性，通过 provide 配置的数据，最终会被保存到组件的 provides 属性中。
• provide 函数支持 3 种类型作为 key，即 InjectionKey | string | number，其中 InjectionKey 类型是 Symbol 类型的子类型。

在以上代码中，我们见到了 currentInstance 对象，那么这个对象内部的结构是怎样的呢?为了一探究竟，我们在 provide 函数内部加个断点：

由上图可知， currentInstance 是一个含有多种属性的普通对象。其中 bc(BEFORE_CREATE)、bm(BEFORE_MOUNT) 和 bu(BEFORE_UPDATE) 是与生命周期相关的钩子。那么问题又来了，currentInstance 对象是怎么创建的?看过之前 Vue 3.0 进阶系列文章的小伙伴，可能对 createComponentInstance 函数有点印象，该函数的作用就是创建组件实例，具体代码如下所示：

 
 
 
 

  
  
  
  
// packages/runtime-core/src/component.ts 
  
  
  
  
export function createComponentInstance( 
  
  
  
  
  vnode: VNode, 
  
  
  
  
  parent: ComponentInternalInstance | null, 
  
  
  
  
  suspense: SuspenseBoundary | null 
  
  
  
  
) { 
  
  
  
  
  const type = vnode.type as ConcreteComponent 
  
  
  
  
  // inherit parent app context - or - if root, adopt from root vnode 
  
  
  
  
  const appContext = 
  
  
  
  
    (parent ? parent.appContext : vnode.appContext) || emptyAppContext 
  
  
  
  
 
  
  
  
  
  const instance: ComponentInternalInstance = { 
  
  
  
  
    uid: uid++, vnode, type, 
  
  
  
  
    parent, appContext, 
  
  
  
  
    root: null!, // to be immediately set 
  
  
  
  
    subTree: null!, // will be set synchronously right after creation 
  
  
  
  
    update: null!, // will be set synchronously right after creation 
  
  
  
  
    render: null, effects: null, 
  
  
  
  
    provides: parent ? parent.provides : Object.create(appContext.provides), 
  
  
  
  
    bc, bm, bu 
  
  
  
  
    // 省略大部分属性 
  
  
  
  
  } 
  
  
  
  
  // 省略部分代码 
  
  
  
  
  instance.root = parent ? parent.root : instance 
  
  
  
  
  instance.emit = emit.bind(null, instance) 
  
  
  
  
  return instance 
  
  
  
  
} 
 
 
 
 

需要注意的是，如果当前组件 parent 属性的值不为 null 时，则将使用 parent.provides 的值作为组件实例 provides 属性的属性值。介绍完 provide 和 createComponentInstance 函数，为了让大家能够更好地理解前面的示例，阿宝哥用一张图来总结一下示例中组件之间的关系：

对于根组件来说，它的 parent 属性值为 null。好的，provide 函数就先介绍到这里，下面我们来开始介绍 inject 函数。

三、Inject 函数

同样，在分析 inject 函数之前，我们也先来回顾一下它的用法：

 
 
 
 

  
  
  
  
const Consumer = { 
  
  
  
  
  setup() { 
  
  
  
  
    const name = inject('name') 
  
  
  
  
    return () => `大家好，我是${name}!` 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

inject 函数与 provide 函数是互相配合的，它们都被定义在 runtime-core/src/apiInject.ts 文件中：

 
 
 
 

  
  
  
  
// packages/runtime-core/src/apiInject.ts 
  
  
  
  
export function inject( 
  
  
  
  
  key: InjectionKey | string, 
  
  
  
  
  defaultValue?: unknown, 
  
  
  
  
  treatDefaultAsFactory = false 
  
  
  
  
) { 
  
  
  
  
  const instance = currentInstance || currentRenderingInstance // 获取当前实例 
  
  
  
  
  if (instance) { 
  
  
  
  
    // to support `app.use` plugins, 
  
  
  
  
    // fallback to appContext's `provides` if the intance is at root 
  
  
  
  
    const provides = 
  
  
  
  
      instance.parent == null 
  
  
  
  
        ? instance.vnode.appContext && instance.vnode.appContext.provides 
  
  
  
  
        : instance.parent.provides 
  
  
  
  
 
  
  
  
  
    if (provides && (key as string | symbol) in provides) { 
  
  
  
  
      // TS doesn't allow symbol as index type 
  
  
  
  
      return provides[key as string] 
  
  
  
  
    } else if (arguments.length > 1) { 
  
  
  
  
      return treatDefaultAsFactory && isFunction(defaultValue) 
  
  
  
  
        ? defaultValue() 
  
  
  
  
        : defaultValue 
  
  
  
  
    } else if (__DEV__) { 
  
  
  
  
      warn(`injection "${String(key)}" not found.`) 
  
  
  
  
    } 
  
  
  
  
  } else if (__DEV__) { 
  
  
  
  
    warn(`inject() can only be used inside setup() or functional components.`) 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

在 inject 函数中，我们可以清楚地看到如果当前实例的 parent 属性为 null 时，则会从 appContext 上下文中获取 provides 对象，否则将从当前实例的父组件实例中获取 provides 对象。

对于我们的示例来说，在获取到 provides 对象后，就会判断 name 属性是否存在于当前的 provides 对象中，此时该对象是 { name: "阿宝哥"}，所以会直接返回 "阿宝哥"。

此外，通过观察 inject 函数，我们还可以得出以下结论：

• inject 函数的第二个参数是一个可选参数 —— defaultValue?: unknown，用于设置默认值或默认值工厂。即在 provides 对象上找不到 key 对应值的时候，可以使用默认值或默认值工厂的返回值来代替。
• inject 函数只能在 setup() 或函数组件中使用。

四、App 对象中的 provide API

在创建完 Vue 3 应用对象之后，我们可以使用该对象提供的 provide 方法。该方法设置一个可以被注入到应用范围内所有组件中的值。之后，组件就可以使用 inject 来接收 provide 的值。

 
 
 
 

  
  
  
  
import { createApp } from 'vue' 
  
  
  
  
 
  
  
  
  
const app = createApp({ 
  
  
  
  
  inject: ['name'], 
  
  
  
  
  template: ` 
  
  
  
  
    
 
  
  
  
  
      {{ name }}