开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

在vue中有一个隐藏的比较深的功能，我觉得需要单独拿出来讲一下，那就是vue中的依赖注入，类似于react之context.在vue中，这个功能叫provide&inject，也就是提供和注入的意思

什么是依赖注入

依赖注入 (Dependency Injection, DI)，并非是vue中的概念，是一种设计模式。它的目的就是解耦，把你的方法，和这个方法需要的依赖，分离开来。

那么对于vue组件来说，什么是依赖呢？

Props、Events、Attrs,对于组件来说这些参数都是外部传入的，都是组件的依赖。我们平常都是从父组件向子组件传递，从某种程度上讲，这已经是依赖注入了，那么为什么vue还要设计provide&inject？

provide&inject其实是为了解决多层级的数据传递，当我们有一个层级非常复杂的组件数，从根组件向子组件传递数据时，我们可能需要反复写很多次props，一般这种时候，普通人的选择都是使用全局的状态管理，但实际上vue为我们提供了更简单的方式，那就是provide&inject

Provide (提供)

为所有子组件提供数据，它的使用方法很简单，可以从vue中直接引入，或者使用options Api

import { provide } from 'vue'
provide(key,value)

这个函数不限制调用次数，也不限制value的类型，因此你可以在一个组件内多次调用，也可以调用一次，传入一个reactive.

除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖，也就是在main.js里创建vue实例的时候,这样创建的就相当于提供了一个全局数据

const app = createApp({}) 
app.provide(key,value)

现在我们了提供的数据，那么在子组件中自然需要一个接受数据的函数,它的使用方法与provide类似

import { inject } from 'vue' 
const message = inject('message')

在vue文档中，给出了这样一个例子，这不就是react useState的翻版？