Vue.use()实现原理；使用插件；开发插件 Vue.use()实现原理；使用插件；

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()实现原理；使用插件；开发插件】①：Vue.use接受一个参数plugin，方法检测了installedPlugins这个数组中是否已经包含想要注册的组件，可知插件只允许被注册一次，二次注册是无效的。
②：调用toArray将转入的参数转换成数组，toArray源码如下：

/** * Convert an Array-like object to a real Array. */ export function toArray (list: any, start?: number): Array { start = start || 0 let i = list.length - start const ret: Array = 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，避免重复注册，返回当前实例，代码执行结束。