依赖注入
依赖注入用于祖先组件向后代组件传递数据。
特点：
祖先组件不需要知道哪些后代组件在使用它提供的数据。
后代组件也不需要知道注入的数据来自哪里。
/**
* 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 层面上来做设计
