Vue3 源码解读系列（九）—

Vue3 源码解读系列（九）——依赖注入

依赖注入

依赖注入用于祖先组件向后代组件传递数据。

特点：

祖先组件不需要知道哪些后代组件在使用它提供的数据。

后代组件也不需要知道注入的数据来自哪里。

在这里插入图片描述

/**
 * provide 的实现
 */
function provide(key, value) {
  let provides = currentInstance.provides // 当前实例的 provides
  const parentProvides = currentInstance.parent && currentInstance.parent.provides // 父组件的 provides

  // 判断 key 重复，子组件实例的 key:value 会覆盖父组件的
  if (parentProvides === provides) {
    provides = currentInstance.provides = Object.create(parentProvides)
  }
  provides[key] = value
}

// 组件实例的 provides 对象指向父组件实例的 provides 对象
const instance = {
  provides: parent ? parent.provides : Object.craete(appContext.provides), // 依赖注入相关
  // others...
}

/**
 * inject 的实现
 */
function inject(key, defaultValue) {
  const instance = currentInstance || currentRenderingInstance
  if (instance) {
    const provides = instance.provides
    // 存在 key，则返回对应的 value
    if (key in provides) {
      return provides[key]
    }
    // 不存在 key，则返回默认值 defaultValue
    else if (arguments.length > 1) {
      return defaultValue
    }
    // 如果都不成立，则在非生产环境报警告
    else if ((process.env.NODE_ENV !== 'production')) {
      warn(/* ... */)
    }
  }
}

依赖注入 (provide/inject) 与模块导出导入 (export/import) 的区别：

作用域不同

依赖注入的作用域是局部范围，把数据注入这个节点为根的后代组件中
模块化的作用域是全局范围的，在任何地方引用它导出的数据

数据来源不同

使用依赖注入，后代组件不需要注入的数据来自哪里
使用模块化，后代组件必须要知道数据定义在哪个文件

上下文不同

依赖注入根据不同的组件上下文提供不同的数据给后代组件
模块化则是从 API 层面上来做设计