本篇文章源码参考:vue2 v2.6.12
Vue.use() 作用是什么?
我们来看一段官方文档对 Vue.use 的介绍。
简单来说它的作用是给你的应用程序添加额外的扩展功能,让你的项目锦上添花。
我们可以注意到两点:
- use() 参数为一个 plugin 支持两种类型 Object | Function,如果是 Object 的话那么这个对象里面必须包含 install 方法,如果是 Function 那么该函数会被直接当成 install 方法调用
- 即使你多次调用 use 安装同一个插件,最终只会安装一次。
Vue.use() 源码
use 方法源代码以及注释
/* @flow */
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
// use 方法接收一个参数 plugin 参数类型可以为 Function 或 Object
Vue.use = function (plugin: Function | Object) {
// 定义一个记录已经安装了的插件数组列表
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 如果 plugin 在安装数组里面存在则不再进行安装(不往后面执行)
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// 得到除 plugin 之外的参数
const args = toArray(arguments, 1)
// 使 install 方法接收的第一个参数为 this 即 Vue
args.unshift(this)
// plugin 是一个对象且含有 install 方法
if (typeof plugin.install === 'function') {
// 调用函数 install 给 Vue 添加扩展功能
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
// plugin 为一个函数时
// 调用函数 install 给 Vue 添加扩展功能
plugin.apply(null, args)
}
// 将当前插件记录到已安装插件列表
installedPlugins.push(plugin)
// 返回 this 说明可以进行链式调用
return this
}
}
以上源码中用到的 toArray 工具方法源码
/**
* EN-note:Convert an Array-like object to a real Array.
* 将类数组对象转化为一个真实数组。 ps:start=1 表示只返回了除 plugin 之外的参数
*/
export function toArray (list: any, start?: number): Array<any> {
start = start || 0
let i = list.length - start
const ret: Array<any> = new Array(i)
while (i--) {
ret[i] = list[i + start]
}
return ret
}
希望以上源码以及注释让你对 Vue.use() 方法有一个更深的了解
编写插件核心代码
通过以上源码我们已经知道了 use() 的执行逻辑,上面提及的 install 方法,它就是我们编写插件核心代码的地方。
install 方法内可以执行哪些操作?通过以上源码我们已经知道 install 方法的第一个参数是 Vue 构造函数,那么我们可以针对 Vue 做以下几种操作(非全部,具体参考官方文档)。
- 添加全局的方法或者属性
myPlugin.install = function(Vue, options){
Vue.myFun = function( options ) {
// 逻辑代码...
}
}
- 添加全局资源:指令/组件/过滤器等等
// 自定义指令
myPlugin.install = function(Vue, options){
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑代码...
}
})
}
- 给 Vue 实例添加方法
myPlugin.install = function(Vue, options){
Vue.prototype.$myMethod = function(options){
// 逻辑代码...
}
}
- 添加一个功能库,如 vue-router
安装 vue-router 时它给应用程序注册了 router-view 、router-link 两个全局组件,并在 vue 实例上添加了相关的路由实例。