使用Provide和Inject的Vue依赖注入对于构建Vue3插件或避免propdrilling很有用。虽然不常用，但您可以仅使用两种内置方法来实现依赖注入：provide和inject。查看CompositionAPI文档可以发现，在Vue3.0中更常见的是使用Provide和Inject进行依赖注入。这主要是因为CompositionAPI中的this引用发生了变化，插件不得不切换到这种模式。在本文中，我们将研究在Vue3中使用Provide和Inject以及如何使用它来构建VueJS插件。为什么Vue3插件的工作方式与以前不同在Vue2中，大多数插件都会在此.例如，可以通过this.$router访问Vue路由器。但是，setup()方法不再包含对this的相同引用。此更改的主要原因是添加对Typescript的支持。那么我们如何在Vue3中访问我们的插件呢？我们可以使用provide和inject来帮助我们在Vue程序中注入依赖。Provide/inject用于依赖注入，它允许我们在Vue应用程序的根目录中提供插件，然后将它们注入到子组件中。在CompositionAPI中，这两个方法只能在setup()方法期间调用。什么是提供和注入？我们需要某种密钥来识别依赖关系，而Javascript的Symbol可以满足这一要求。然后provide方法会将我们的Symbol与一个值相关联，而inject方法将检索具有相同Symbol的值。下面是一个例子：import{provide,inject}from'vue'constLoggedInSymbol=Symbol()constParentComponent={setup(){provide(LoggedInSymbol,true)}}constDeepDescendent={setup(){//第二个可选参数是默认值（如果不存在）constisLoggedIn=inject(LoggedInSymbol,false)return{isLoggedIn}}}Vue3可以通过这种模式实现一些非常有用的技巧。依赖可以在程序中全局提供如果我们想在全局范围内提供一些东西，我们可以在声明我们的VUE实例时使用app.provide。然后可以以相同的方式进行注射。main.jsimport{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)constThemeSymbol=Symbol()app.provide(ThemeSymbol,'dark')app.mount('#app')即可usedref提供响应式数据，如果我们希望将响应式数据传递给子组件，这也非常方便。只需使用ref()传递我们方法的响应式属性。//producerr（父组件）constLoggedInSymbol=Symbol()constloggedIn=ref('true')provide(LoggedInSymbol,loggedIn)//consumer（子组件）consttheme=inject(LoggedInSymbol,ref('false'))如何使用provide并注入插件实际上，设计插件与我们刚刚看到的简单示例非常相似。但是我们不想使用单个值，而是想使用复合函数。这是Vue3的一个巨大优势——能够按功能组织和提取代码。由于我们的代码无论如何都应该写成有组织的组合函数，所以我们只需要创建这些提供和注入方法就可以编写插件了。我们简单看一下Vue3CompositionAPI文档中提供的插件示例。plugin.jsconstStoreSymbol=Symbol()exportfunctionprovideStore(store){provide(StoreSymbol,store)}exportfunctionuseStore(){conststore=inject(StoreSymbol)if(!store){//throwerror,nostoreprovided}returnstore}在实际中会这样组件使用：//在组件根目录下提供store//constApp={setup(){provideStore(store)}}constChild={setup(){conststore=useStore()//usethestore}}根据上面的代码，在一些根组件中，我们提供插件并将组件功能传递给它。然后我们必须将它注入到我们想要使用它的组件中。组件永远不必实际进行提供/注入调用，而只需调用插件公开的provideStore/useStore方法。我还能使用我的旧插件吗？简而言之：是的。说多了就看你自己的想法了。OptionsAPI可以继续使用，引用方式和以前一样，所有遗留插件的工作方式都一样。但是迁移到Vue3并利用其所有功能是值得的。只要你想使用Vue2的OptionsAPI，你的插件就可以正常工作。但是，有许多维护良好的插件或库应该添加对Vue3的支持。总结正确使用provide/inject绝对可以提高你对Vue的驾驭能力。虽然许多应用程序不会使用这些概念，但如果您认真开发插件，Vue3的CompositionAPI意味着您必须使用提供和注入。
