# 前言
通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。对于层级不深的父子组件可以通过 props 透传数据,但是当父子层级过深时,数据透传将会变得非常麻烦和难以维护,引用 Vue.js 官网的一张图:

而依赖注入则是为了解决 prop 逐级透传 的问题而诞生的,父组件 provide 需要共享给子组件的数据,子组件 inject 使用需要的父组件状态数据,而且可以保持响应式。

再来看一个依赖注入的使用示例:
// 父组件
import { provide, ref } from 'vue'
const msg = ref('hello')
provide(/* 注入名 */ 'message', /* 值 */ msg)
//子组件使用
import { inject } from 'vue'
const message = inject('message')
@前端进阶之旅: 代码已经复制到剪贴板
那么,依赖注入的核心实现原理是怎样的呢?接下来我们就一起分析吧。
# Provide
Provide 顾名思义,就是一个数据提供方,看看源码里面是如何提供的:
export function provide(key, value) {
if (!currentInstance) {
// ...
} else {
// 获取当前组件实例上的 provides 对象
let provides = currentInstance.provides
// 获取父组件实例上的 provides 对象
const parentProvides =
currentInstance.parent && currentInstance.parent.provides
// 当前组件的 providers 指向父组件的情况
if (parentProvides === provides) {
// 继承父组件再创建一个 provides
provides = currentInstance.provides = Object.create(parentProvides)
}
// 生成 provides 对象
provides[key] = value
}
}
@前端进阶之旅: 代码已经复制到剪贴板
这里稍微回忆一下 Object.create 这个函数:这个方法用于创建一个新对象,使用现有的对象来作为新创建对象的原型(prototype)。
所以 provide 就是通过获取当前组件实例对象上的 provides,然后通过
