依赖注入

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

特点：

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

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

/*** provide 的实现*/
function provide(key, value) {let provides = currentInstance.provides // 当前实例的 providesconst 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 || currentRenderingInstanceif (instance) {const provides = instance.provides// 存在 key，则返回对应的 valueif (key in provides) {return provides[key]}// 不存在 key，则返回默认值 defaultValueelse if (arguments.length > 1) {return defaultValue}// 如果都不成立，则在非生产环境报警告else if ((process.env.NODE_ENV !== 'production')) {warn(/* ... */)}}
}

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

1. 作用域不同

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

2. 数据来源不同

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

3. 上下文不同

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