# 前言
通常情况下，当我们需要从父组件向子组件传递数据时，会使用 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，然后通过
