Vue2中的依赖注入

 // 在其上(N)层组件中提供一个provide函数
 export default {
   provide: function() {
     return {
       foo: this.foo
     }
   }
 }
 
 // 在子孙组件中进行注入
 export default {
   inject: ['foo']
 }

Vue3中的依赖注入

 // provider
 import { provide, ref } from 'vue'
 export default {
   setup() {
     const theme = ref('dark')
     provide('theme', theme)
   }
 }
 // inject
 import { inject } from 'vue'
 export default {
   setup() {
     // inject支持第二个参数, 作为依赖注入的默认值
     const theme = inject('theme', 'light')
     return {
       theme
     }
   }
 }

provide API

 function provide(key, value) {
   let provides = currentInstance.provides
   const parentProvides = currentInstance.parent && currentInstance.parent.provides
   if (parentProvides === provides) {
     provides = currentInstance.provides = Object.create(parentProvides)
   }
   provides[key] = value
 }
 
 // 在实例创建过程中, 将provides对象指向父组件实例的provides对象
 const instance = {
   // ...
   provides: parent ? parent.provides : Object.create(appContext.provides)
   // ...
 }

inject API

 function inject(key, defaultValue) {
   const instance = currentInstance || currentRenderingInstance
   if (instance) {
     const provides = instance.provides
     // 能够从父级找到provide, 且有对应的key, 返回该value
     if (key in provides) {
       return provides[key]
     // 否则, 如果有默认值, 就返回这个默认值
     } else if (arguments.length > 1) {
       return defaultValue
     // 否则, 如果是非正式环境, 抛出找不到的警告
     } else if ((process.env.NODE_ENV !== 'production')) {
       // throw warn
     }
   }
 }

为何要用依赖注入?

1. 直接使用全局数据的话数据的可溯性差, 如果使用全局数据, 我们并不知道这个数据在哪里被修改.

2. 依赖注入只作用在该组件的子孙...组件中, 并没有影响到其他的组件

3. 依赖注入饿后代组件并不需要知道注入的数据来自哪里, 只需要注入并使用即可. 而对于定义变量引入的方式来说, 我们需要知道它是在哪里被定义的, 才能够引入它