在使用 vue-router 、 iview 、vuex 的时候,我们都会用到 Vue.use()
。那么,到底 Vue.use()
是什么,又是为什么可以使用 Vue.use()
呢?
我们可以简单理解,一个有 install 方法的组件,就可以通过 Vue.use()
来引用。这样写的好处就是插件需要一开始调用的方法都封装在 install 里面,更加精简和可扩展性更高。
Vue.use()
必须传入一个参数,该参数类型必须是 Object 或者 Function 。如果是 Object ,那么这个 Object 必须定义一个 install 方法,如果是 Function ,那么这个函数就被当作是 install 方法。在 Vue.use()
执行时 install 会默认执行。
下面举一个新建一个插件可以被 Vue.use 调用的插件的例子:
MyPlugin.install = function(Vue, options) {
// 全局注册组件(指令等功能资源类似)
Vue.component('component-name', {
// 组件内容
})
// 添加实例方法
Vue.prototype.$Notice = function() {
// 逻辑
}
// 添加全局方法或属性
Vue.globalMethod = function() {
// 逻辑
}
// 添加全局混合
Vue.mixin({
mounted: function() {
// 逻辑
}
})
通过 Vue.use()
来使用插件:
Vue.use(MyPlugin)
// 或
Vue.use(MyPlugin, {
// 参数
})
Vue.use() 源码解析
源码位置:vue/src/core/global-api/use.js
/* @flow */
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
// 存储已经装载过的插件
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 同一个插件只能注册一次
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
const args = toArray(arguments, 1)
// 将 Vue 对象拼接到数组头部
args.unshift(this)
if (typeof plugin.install === 'function') {
// 如果传入的是对象,且提供了 install 方法,则调用 install 方法
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
// 如果传入的是函数,则直接调用
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
// toArray 方法源码
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
}