跳到主要内容

Vue.use

我们使用的第三方 Vue.js 插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为install方法。install方法调用时,会将Vue作为参数传入。该方法需要在调用new Vue()之前被调用。 我们在使用插件或者第三方组件库的时候用到Vue.use这个方法,比如

import iView from 'iview'
Vue.use(iView)

那么Vue.use到底做了些什么事情呢?我们先来看一下源码

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)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}

我们由以上可以看出,plugin参数为函数或者对象类型,首先Vue会去寻找这个插件在已安装的插件列表里有没有,如果没有,则进行安装插件,如果有则跳出函数,这保证插件只被安装一次。 接着通过toArray方法将参数变成数组,再判断plugin的install属性是否为函数,或者plugin本身就是函数,最后执行plugin.install或者plugin的方法。 举个例子 下面我们来举个实际例子 1、编写两个插件

const Plugin1 = {
install(a) {
console.log(a)
}
}

function Plugin2(b) {
console.log(b)
}

export { Plugin1, Plugin2 }

2、引入并 use 这两个插件

import Vue from 'vue'
import { Plugin1, Plugin2 } from './plugins'

Vue.use(Plugin1, '参数1')
Vue.use(Plugin2, '参数2')

此时我们运行项目代码就可以用到上面两个插件了。

参考