Vue3插件探索：功能和原理

Posted by Mars . Modified at Apr 20, 2021

Vue插件的功能和原理，如何编写一个Vue插件。

1. Vue插件的基本结构

Vue插件可以在createApp()创建的应用实例挂载前，使用app.use()方法应用在app上。

import somePlugin from 'somePlugin'
const app = createApp(App);
// 应用插件
app.use(somePlugin);
app.mount(#app);

Vue插件的export需要包含install方法，或者直接export一个函数作为install方法。Vue应用实例在use()这个插件的时候，会自动调用这个install方法。

插件的install()方法，在Vue应用实例调用的时候，会传入两个参数：实例对象app本身和用户自定义的配置对象option。

// vue-next\packages\runtime-core\src\apiCreateApp.ts : line90

// 插件安装函数的TS类型：传入App和options的函数
type PluginInstallFunction = (app: App, ...options: any[]) => any

// 插件：直接是PluginInstallFunction函数，或者是带有install方法为PluginInstallFunction函数的对象。
export type Plugin =
  | PluginInstallFunction & { install?: PluginInstallFunction }
  | {
      install: PluginInstallFunction
    }

// packages/runtime-core/src/apiCreateApp.ts : line160
// app.use 实际运行函数源码
use(plugin: Plugin, ...options: any[]) {
if (installedPlugins.has(plugin)) {
  __DEV__ && warn(`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 (__DEV__) {
  warn(
    `A plugin must either be a function or an object with an "install" ` +
      `function.`
  )
}
return app
}

调用形式： install(app, option);

2.Vue插件的功能

官方解释：Vue插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object，也可以是 function.

插件在被use()加载的时候，运行了内部的install()方法，传入了应用实例app本身作为第一个参数。

因此，插件install方法内可以访问应用实例本身的任何属性，包括：

app.component注册全局组件；
app.config进行应用全局配置:
- app.config.globalProperties注册全局属性；
app.directive注册全局指令；
app.provide为全局子组件注入值；

Keywords: Vue