从Vue源码探究初始化阶段的initInjections函数

2023-12-27 00:06:18

前言

本篇文章将重点介绍生命周期初始化阶段所调用的第四个初始化函数——initInjections。从函数名字上来看，该函数是用来初始化实例中的inject选项的。说到inject选项，那必然离不开provide选项。这两个选项通常成对出现，共同实现了父子组件之间的数据共享。在本文中，我们将深入探究initInjections函数的具体实现，并详细分析inject选项和provide选项是如何协同工作的。

initInjections函数的具体实现

在Vue源码中，initInjections函数位于src/core/instance/init.js文件中。该函数的具体实现如下：

export function initInjections(vm) {
  const opts = vm.$options
  if (opts.inject) {
    resolveInject(vm, opts.inject, vm)
  }
  if (opts.provide) {
    resolveProvide(vm, opts.provide)
  }
}

从代码中可以看出，initInjections函数首先会检查实例的$options对象中是否存在inject选项。如果存在，则会调用resolveInject函数来解析inject选项。resolveInject函数的具体实现如下：

export function resolveInject(vm, inject, parent) {
  if (inject) {
    const keys = isArray(inject) ? inject : Object.keys(inject)
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      const provideKey = key[0] === '_' || isBuiltInInject(key)
        ? key
        : camelize(key)
      resolveProvidedProperty(vm, provideKey, parent)
    }
  }
}

在resolveInject函数中，首先会判断inject选项是否是一个数组。如果是数组，则会直接使用数组中的值作为注入的属性。如果不是数组，则会使用对象的键名作为注入的属性。接下来，函数会遍历注入的属性列表，并为每个属性调用resolveProvidedProperty函数来解析对应的provide属性。resolveProvidedProperty函数的具体实现如下：

export function resolveProvidedProperty(vm, key, parent) {
  const value = parent.$provide[key]
  if (value) {
    defineReactive(vm, key, value)
  }
}

在resolveProvidedProperty函数中，首先会从父组件的$provide对象中获取指定属性的值。如果值存在，则会使用defineReactive函数将该值定义为实例的响应式属性。

inject选项和provide选项的关系

从上述分析中可以看出，inject选项和provide选项是相互对应的。inject选项用于在子组件中注入父组件提供的属性，而provide选项用于在父组件中提供这些属性。两个选项共同实现了父子组件之间的数据共享。

需要注意的是，inject选项和provide选项只能在父子组件之间使用。如果想要在兄弟组件之间共享数据，则需要使用Vuex或其他状态管理工具。

代码示例

为了更好地理解initInjections函数的具体实现和inject选项和provide选项的使用方法，我们来看一个简单的代码示例：

// 父组件
export default {
  name: 'Parent',
  provide: {
    message: 'Hello, world!'
  }
}

// 子组件
export default {
  name: 'Child',
  inject: ['message'],
  render() {
    return <div>{this.message}</div>
  }
}