https://cn.vuejs.org/v2/guide/plugins.html
官网描述：
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：
- 添加全局方法或者属性。如: vue-custom-element
- 添加全局资源：指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如 vue-router
- 添加 Vue 实例方法，通过把它们添加到
Vue.prototype上实现。 - 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
vue.use（plugin, arguments） 语法
参数：plugin(Function | Object)
用法：如果vue安装的组件类型必须为Function或者是Object
如果是个对象，必须提供install方法
如果是一个函数，会被直接当作install函数执行
install函数接受参数，默认第一个参数为Vue,其后参数为注册组件时传入的arguments
组件.js
export const testObj = {
install(Vue, arg) {
}
}
export const testFn = founction(Vue, arg) {
}
index.js
import { testObj, testFn } from './组建.js'
Vue.use(testObj, arg)
Vue.use(testFn, arg)
建议组件采用第一种写法，根据use源码，当采用第二种写法时，this指针指向null
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
使用插件
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
// ...组件选项
})
也可以传入一个可选的选项对象：
Vue.use(MyPlugin, { someOption: true })
Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use()：
// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)
awesome-vue 集合了大量由社区贡献的插件和库。
开发插件
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：
MyPlugin.install = function (Vue, options) {
// 1\. 添加全局方法或属性
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-router这个插件，如图引用即可：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
const routes = [{
path: '/login', // 登录
name: 'login',
component: () =>
import('@/views/login/index.vue')
},
{
path: '/register', // 注册
name: 'register',
component: () =>
import('@/views/register/index.vue')
}
];
export default new Router({
mode: 'history',
scrollBehavior: () => ({
y: 0
}),
routes
})
Vue.use源码分析
Vue.use是通过initUse这个方法初始化的，方法如下：
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
//首先检查Vue对象当前的_installedPlugins属性是否存在，
//如果存在，那就去判断已经注册的组件中是否包含即将要注册的组件。
//如果是，那么直接结束，不用继续往下执行。附带说一下。在条件不满足的情况下，
//Vue.use返回的不是null，而是this。注意我们是在Vue.use方法中使用this，因此this指向Vue。
//返回this可以使用链式调用。
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// 每一个函数默认都有一个arguments参数，我们可以以数组下标的方式(arguments[0])，访问其中的参数
// 但是arguments并不是一个数组。但是接下来我们希望通过apply的方式将Vue.use的参数转嫁给plugin函
// 数plugin.install或者plugin函数，因此必须将arguments转换成真正的数组，因为apply接收数组。
// 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当中。
// 下一次重复注册的时候就直接返回。
installedPlugins.push(plugin)
return this
}
}
①：Vue.use接受一个参数plugin，方法检测了installedPlugins这个数组中是否已经包含想要注册的组件，可知插件只允许被注册一次，二次注册是无效的。
②：调用toArray将转入的参数转换成数组，toArray源码如下：
/**
* Convert an Array-like object to a real Array.
*/
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对象this插入转化后的数组前
④：判断plugin中install是否是一个方法，如果是，则传入plugin及转化后的数组；此外，如果plugin本身就是一个方法，则传入转化后的数组，随后执行这个方法，由此可知Vue.use(插件)实际上会调用插件的install方法，并且调用use的时候是可以传参数的。
注：以上还可以知道，vue只会对plugin中的两种情况处理，即要么plugin中有install函数，要么plugin本身就是一个函数。
⑤：将注册后的插件推进installedPlugins，避免重复注册，返回当前实例，代码执行结束。
网友评论