为什么 Vue3 插件的工作方式与以往不同
在 Vue2 中,大多数插件将属性注入到 this 上。例如可以通过 this.$router 访问 Vue 路由器。
但是,setup() 方法不再包含对 this 的相同引用。进行这种更改的主要原因是增加了对 Typescript 的支持。
那么在 Vue3 中该如何访问我们的插件呢?可以用 provide 和 inject 来帮助我们在 Vue 程序中注入依赖项。Provide/inject 用于依赖项注入,可以使我们能在 Vue 程序的根目录中提供插件,并且然后将其注入子组件中。
在 Composition API 中,只能在 setup() 方法期间调用这两种方法。
什么是 provide 和 inject
我们需要某种键来识别依赖关系, Javascript 的 Symbol 可以复合这种要求。
然后 provide 方法会将我们的 Symbol 与某个值相关联,而 inject 方法会用相同的 Symbol 检索这个值。
下面是一个例子:
根据上述代码,在某些根组件中,我们提供了插件,并向其传递了组件函数。然后无论想在哪里使用都必须将其注入到我们的组件中。
组件永远不必真正进行 provide/inject 调用,而只需调用插件公开的 provideStore/useStore 方法即可。
还能用旧的插件吗
简单的来说是:能。如果多说点,那就是取决于你自己的想法。
可以继续使用 Options API,并且对 this 的引用方式与以前相同,并且所有旧插件的工作方式都不变。
但是迁移到 Vue3 并利用其所有功能觉得是值得的。
只要你想用 Vue2 的 Options API,你的插件就可以正常工作。但是,很多维护良好的插件或库都应该添加对 Vue3 的支持。