Vue 3源码极客之：`Vue`的`plugin`系统：`app.use`的插件安装流程与依赖注入。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊Vue 3里一个非常酷炫的东西：plugin系统，特别是app.use这个方法背后的故事。保证让你听完之后，感觉自己离源码大佬又近了一步。

开场白：插件，Vue的万金油

想象一下，你正在搭建一个乐高城堡。Vue就是那些基础的乐高积木，而plugin就像那些特殊形状的积木，比如窗户、车轮、小人，它们能让你的城堡瞬间变得生动起来。

在Vue的世界里，plugin就是一段代码，它可以扩展Vue的核心功能。比如，你可以用一个插件来注册全局组件、添加全局指令、添加实例方法，甚至改变Vue的内部行为。

而app.use，就是把这些特殊积木拼接到你的乐高城堡上的关键方法。

第一部分：app.use的庐山真面目

首先，让我们来看看app.use的源码（简化版，去掉了类型判断和一些边界处理）：

// packages/runtime-core/src/apiCreateApp.ts

export function createAppAPI<HostElement>(
  render: RootRenderFunction<HostElement>,
  hydrate?: HydrateFunction
): CreateAppFunction<HostElement> {
  return function createApp(
    ...args: any[]
  ): App<HostElement> {
    // ... (省略 createApp 的初始化代码)

    const app: App = {
      // ... (省略其他 app 属性)

      use(plugin: Plugin, ...options: any[]) {
        if (installedPlugins.has(plugin)) {
          warn(`Plugin has already been applied to target app.`);
        } else if (plugin && typeof plugin.install === 'function') {
          installedPlugins.add(plugin);
          plugin.install(app, ...options); // 调用插件的 install 方法
        } else if (typeof plugin === 'function') {
          installedPlugins.add(plugin);
          plugin(app, ...options); // 如果插件是函数，直接调用
        } else {
          warn(
            `A plugin must either be a function or an object with an "install" ` +
              `function.`
          );
        }
        return app;
      },

      // ... (省略其他 app 方法)
    }

    return app
  }
}

这段代码告诉我们：

app.use接收两个参数：
- plugin: 你要安装的插件，它可以是一个对象（带有install方法）或者一个函数。
- ...options: 可选参数，传递给插件的install方法或插件函数。
app.use做了什么：
- 检查插件是否已经安装过，避免重复安装。
- 如果插件是一个对象，并且有install方法，就调用plugin.install(app, ...options)。
- 如果插件是一个函数，就直接调用plugin(app, ...options)。
- 返回app实例，允许链式调用。

简单来说，app.use就是调用插件的“安装器”。这个“安装器”可能是插件对象里的install方法，也可能是插件本身（如果它是一个函数）。

第二部分：插件的两种姿势：对象 or 函数

插件有两种存在形式，它们就像武林高手，修炼的内功心法不一样：

对象型插件： 这种插件必须有一个install方法。

const MyPlugin = {
  install: (app: any, options: any) => {
    // 在这里编写插件的安装逻辑
    console.log('MyPlugin is installed with options:', options);

    // 注册全局组件
    app.component('my-component', {
      template: '<div>This is my component!</div>'
    });

    // 添加全局指令
    app.directive('my-directive', {
      mounted(el: any, binding: any) {
        el.style.color = binding.value;
      }
    });

    // 添加全局属性
    app.config.globalProperties.$myProperty = 'Hello from MyPlugin!';
  }
};

// 使用插件
const app = Vue.createApp({});
app.use(MyPlugin, { color: 'red' }); // 传递选项

install方法接收两个参数：

app: Vue 应用实例，你可以用它来注册组件、指令、添加全局属性等等。
options: 你通过app.use传递的选项。

函数型插件： 这种插件就是一个函数，它会被直接调用。

const MyPlugin = (app: any, options: any) => {
  // 在这里编写插件的安装逻辑
  console.log('MyPlugin (function) is installed with options:', options);

  // 注册全局组件
  app.component('my-component', {
    template: '<div>This is my component!</div>'
  });
};

// 使用插件
const app = Vue.createApp({});
app.use(MyPlugin, { size: 'large' }); // 传递选项

函数型插件的参数和对象型插件的install方法一样。

到底用哪种姿势？

一般来说，如果你的插件逻辑比较复杂，需要维护一些状态，或者需要在install方法之外定义一些辅助函数，那么对象型插件更合适。如果你的插件逻辑很简单，只是简单地注册一些组件或指令，那么函数型插件就足够了。

第三部分：插件的秘密武器：依赖注入

Vue 3的插件系统还支持依赖注入，这让插件的开发更加灵活。想象一下，你的插件需要访问一个全局配置对象，或者需要使用一个第三方库。你可以通过依赖注入来实现：

// 插件
const MyPlugin = {
  install: (app: any, options: any) => {
    // 从 app 中获取注入的依赖
    const config = app.config.globalProperties.$config;
    const axios = app.config.globalProperties.$axios;

    console.log('Config from plugin:', config);
    console.log('Axios from plugin:', axios);

    // 使用依赖
    axios.get('/api/data')
      .then((response: any) => {
        console.log('Data from API:', response.data);
      });
  }
};

// 创建应用并注入依赖
const app = Vue.createApp({
  template: '<div>Hello, world!</div>'
});

app.config.globalProperties.$config = {
  apiUrl: 'https://example.com/api'
};

// 模拟 axios
app.config.globalProperties.$axios = {
  get: (url: string) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ data: { message: 'Hello from API!' } });
      }, 500);
    });
  }
};

// 使用插件
app.use(MyPlugin);
app.mount('#app');

在这个例子中，我们在创建应用时，通过app.config.globalProperties注入了$config和$axios两个依赖。插件可以通过app.config.globalProperties访问这些依赖。

依赖注入的优点：

解耦： 插件不需要直接依赖具体的配置对象或第三方库，而是通过依赖注入来获取。这降低了插件和应用之间的耦合度。
可配置性： 你可以在创建应用时，根据不同的环境或需求，注入不同的依赖。
可测试性： 你可以在测试插件时，注入 mock 依赖，方便进行单元测试。

第四部分：installedPlugins：插件的黑名单

回到app.use的源码，你会发现一个installedPlugins集合。这个集合就像一个黑名单，记录了已经安装过的插件。

const installedPlugins = new Set<Plugin>();

app.use在安装插件之前，会检查插件是否已经在installedPlugins中。如果已经在，就会发出警告，避免重复安装。

为什么要避免重复安装？

重复安装插件可能会导致：

性能问题： 重复注册组件、指令会增加应用的负担。
冲突： 不同的插件可能会修改同一个全局属性，导致冲突。
逻辑错误： 插件的安装逻辑可能会被执行多次，导致意想不到的错误。

第五部分：实战演练：开发一个Toast插件

让我们来开发一个简单的Toast插件，它可以显示消息提示：

// Toast 组件
const ToastComponent = {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  template: `
    <div class="toast">
      {{ message }}
    </div>
  `,
  mounted() {
    // 自动消失
    setTimeout(() => {
      this.$el.remove();
    }, 3000);
  }
};

// Toast 插件
const ToastPlugin = {
  install: (app: any) => {
    // 注册全局组件
    app.component('toast', ToastComponent);

    // 添加全局方法
    app.config.globalProperties.$toast = (message: string) => {
      // 创建 Toast 组件实例
      const toastInstance = app.component('toast').__hmrId
        ? Vue.createVNode(app.component('toast'), { message }) // for HMR
        : Vue.createVNode(ToastComponent, { message });

      // 渲染组件实例
      const container = document.createElement('div');
      document.body.appendChild(container);
      Vue.render(toastInstance, container);
    };
  }
};

// 使用插件
const app = Vue.createApp({
  template: `
    <div>
      <button @click="$toast('Hello, Toast!')">Show Toast</button>
    </div>
  `
});

app.use(ToastPlugin);
app.mount('#app');

在这个例子中，我们：

定义了一个ToastComponent，用于显示消息提示。
创建了一个ToastPlugin，它：
- 注册了ToastComponent为全局组件。
- 添加了一个全局方法$toast，用于显示Toast。
在应用中使用了ToastPlugin。

现在，你就可以在任何组件中使用$toast方法来显示消息提示了。

第六部分：注意事项和最佳实践

插件的命名： 建议使用vue-或@scope/vue-前缀来命名你的插件，避免命名冲突。
插件的导出： 建议将插件导出为一个对象或函数，方便用户使用。
插件的文档： 编写清晰的文档，说明插件的功能、用法和配置选项。
异步插件： 插件的安装逻辑可以是异步的，例如，从服务器加载配置。你可以在install方法或插件函数中使用async/await。
插件的测试： 编写单元测试，确保插件的正确性。

总结：app.use的奥秘

app.use是Vue 3插件系统的核心方法，它负责调用插件的“安装器”，将插件的功能添加到Vue应用中。插件可以是对象（带有install方法）或函数。插件系统还支持依赖注入，让插件的开发更加灵活。installedPlugins集合用于避免重复安装插件。

希望今天的讲解能让你对Vue 3的插件系统有更深入的了解。现在，你可以尝试开发自己的插件，为Vue应用添加各种酷炫的功能了！下次再见！

发表回复 取消回复

发表回复取消回复