在vue中,插件是为了给应用实例添加全局功能。插件通常是一个object暴露出一个install方法,或者一个function。一般来说有以下几种用途:
- 添加全局的方法或者属性
- 添加全局资源:指令、过滤器等
- 通过全局混入来添加一些组件选项
- 通过config.globalProperties来添加应用实例方法
以代码示例说明,我们新建一个test.plugin.ts,这是我们的插件源码:
插件首先引入了vue的应用实例类型App,然后默认暴露了plugins对象。我们在该对象中注册了全局的属性方法、组件、以及全局的数据共享。
此时我们需要在入口文件man.ts引入我们的插件:
注意:在vue3中我们传入 createApp 的对象实际上是一个组件,每个应用都需要一个“根组件”,其他组件将作为其子组件。这里我们使用的是App.vue这个组件作为它的根组件,然后通过应用的use方法使用了插件。
插件的使用及其简单,我们可以在组件的生命周期中调用全局注册的方法:
或者使用
inject方法获取provide提供的全局数据:
我们日常使用的ui组件库实际也是应用了插件系统,这些组件库通常有两种使用方式:
- 单组件导入
- 所有组件全部导入
单组件导入原理
所有的组件都会在其根目录下建立一个index.ts文件,在这个文件当中,我们导入了实际的组件,并为该组件提供了install方法,最后将处理后的代码默认导出:
使用方式:
所有组件全部导入
- 建立index.ts文件作为组件的统一入口文件
- 将所有组件导入,作为一个数组,创建一个install函数,循环调用app.component
- 默认导出一个插件(install函数)
总结:vue的插件系统实际是提供了install方法作为统一的组册方式,vue应用实例会在使用这些插件或者组件时(app.use和app.components),调用其提供的install方法,然后为应用实例挂载对应的功能。