Vue.use()是用来使用插件的。
插件的作用：插件通常用来为Vue添加全局功能，插件的功能没有严格的限制，一般有以下几种：
- 添加
全局方法或property,如：vue-custom-element
- 添加全局资源：
指令、过滤器、过度等，如：vue-touch
- 通过全局混入来添加一些组件选项，如： vue-router
- 添加Vue实例方法，通过把它们添加到
Vue.prototype上实现
- 一个库，提供自己的API,同时提供上边的一种或几种功能，如： vue-router
通过全局方法 Vue.use()使用插件，它需要你在调用new Vue()启用应用之前完成。
// 调用 myPlugin.install(Vue)
Vue.use(myPlugin)
new Vue({
// ...组件选项
})
也可以传入一个可选的选项对象：
Vue.use(myPlugin,{someOptions:true})
Vue.use会自动阻止多次注册相同的插件，届时即使多次调用也只会注册一次该插件
Vue.js 官方提供的一些插件，如：vue-router，在检测到 Vue是可访问的全局变量时，会自动调用Vue.use(),然而在像 CommonJS这样的模块环境中，你应该始终显式的调用Vue.use()
// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
const Vue = require('vue')
const VueRouter = require('vue-router')
//别忘了调用此方法
Vue.use(VueRouter )
开发插件
- Vue.js的插件，应该暴露一个
install方法，这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
Vue.use用法
- 安装Vue.js插件，如果插件是一个
对象,必须提供 install方法，如果插件是一个函数，它会被作为install方法，install方法调用是，会将Vue作为参数传入
- Vue.use()需要在 调用 new Vue()之前被调用
所以，Vue.use的参数必须是一个Object对象或者function函数,如果是对象的话，必须要提供install方法，之后会将Vue作为参数传入
也就是说：
- Vue.use的参数为函数时，这个函数的参数是 Vue对象
- Vue.use的参数为对象时，install方法的参数是Vue对象
Vue.use的源码
import { toArray } from '../util/index'
// Vue.use 源码
export function initUse (Vue: GlobalAPI) {
// 首先先判断插件plugin是否是对象或者函数：
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// 取vue.use参数,toArray() 方法代码在下一个代码块
const args = toArray(arguments, 1)
args.unshift(this)
// 判断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。
if (typeof plugin.install === 'function') {
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
}
总结 Vue.use()源码
- 首先判断插件 plugin 是否是对象或者函数 代码：
`plugin: Function | Object`
- 判断Vue是否已注册过这个插件，如果注册过就跳出方法,代码：
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
// 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
- 处理Vue.use的入参，将第一个参数之后的参数归集,并在首部塞入this上下文，代码：
const args = toArray(arguments, 1)
args.unshift(this)
- 断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。代码：
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
- 缓存插件,代码：
installedPlugins.push(plugin)
