vue3插件原理

概览

vue3的生态圈提供了许多方便的插件或者工具，比如pinia、vue-router和Element Plus等，使用插件的写法一般如下:

const app = createApp(App);

app.use(pinia);
app.use(router);
app.use(ElementPlus, { locale }); // 第二个参数:{locale} 为传给插件的参数

源码分析

vue3中use方法的实现

打印createApp的返回值app,如下图所示，

其实现如下:

        use(plugin, ...options) {
          if (installedPlugins.has(plugin)) {
            warn2(`Plugin has already been applied to target app.`);
          } else if (plugin && isFunction(plugin.install)) {
            installedPlugins.add(plugin);
            plugin.install(app, ...options);
          } else if (isFunction(plugin)) {
            installedPlugins.add(plugin);
            plugin(app, ...options);
          } else if (true) {
            warn2(
              `A plugin must either be a function or an object with an "install" function.`
            );
          }
          return app;
        },

实现的源码中,installedPlugins是个WeakSet类型的局部变量，先是判断插件plugin是否被安装过，插件只需要安装一次，不能重复安装；然后判断插件是否存在install方法，若存在就调用plugin.add方法，并将console.log打印出来的app变量的值会作为参数传给plugin;若plugin不存在install方法，且其自身就是个函数类型，就调用plugin(app)，否则报错;最后返回app。

vue3中接收插件的就这段代码，可以说理解起来非常简单，基于此，就可以在插件plugin中拿到app这个实例对象了。

插件中的install

在 Pinia 部分源码浅析一文中有提到 Pinia相关的实现

我们可以自己写个 Plugin 测试下,其本质上就是一个包含install属性方法的一个对象而已。

如下：

const plugin = {
  install: (app) => {
    console.log("🚀 ~ app:", app);
  },
};
export default plugin;

打印出来如下：