Vue.use()的使用和原理

Vue.use()的作用是通过全局方法 Vue.use() 使用插件
插件通常用来为 Vue 添加全局功能，可以通过全局方法 Vue.use() 使用插件，而且它需要在你调用 new Vue() 启动应用之前完成。

Vue.use(plugin, options)
plugin的类型可以是{ object | Function }
options是一个可选的对象

举例

我们先来看下面的例子，看一下Vue.use的简单应用
目录结构如下：

plugin.js 代码如下：

// object --- 对象中包含install方法
const plugin1 = {
    install(vue, options){
        console.log("带有install方法的对象");
        console.log("plugin1 第一个参数",vue)
        console.log("plugin1 第二个参数",options)
     }
}

// Function --- 直接是一个方法
function plugin2(vue, options) {
    console.log("不带install方法的方法");
    console.log("plugin2 第一个参数", vue)
    console.log("plugin2 第二个参数", options)
}

export { plugin1, plugin2 }

use.js 代码如下：

import Vue from 'vue'
import {plugin1,plugin2} from './plugin'

Vue.use(plugin1,'插件1的参数')
console.log('------------------------------------------');
Vue.use(plugin2,'插件2的参数')

main.js 代码如下：

import Vue from 'vue'
import App from './App.vue'
import './plugins/use'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

执行的结果如下：

从执行的结果来看，对象plugin1中的install方法中的第一个参数打印的是Vue对象，第二个参数打印的是传入的参数。
函数plugin2中的第一个参数打印的是Vue对象，第二个参数打印的是传入的参数。
但是我们没有把Vue对象传给install方法或者plugin2方法呀，我们只是在use.js中用Vue.use这样操作了一波，是不是Vue.use帮我们做了这些呢？下面我们看源码分析一下。

Vue.use(plugin1,'插件1的参数')
console.log('------------------------------------------');
Vue.use(plugin2,'插件2的参数')

源码分析

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源码

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
  }
}

从源码中我们可以发现 vue 首先判断这个插件是否被注册过，不允许重复注册，并且接收的 plugin 参数的限制是 Function | Object 两种类型。
对于这两种类型有不同的处理。
首先将我们传入的参数整理成数组： const args = toArray(arguments, 1)；
再将 Vue 对象添加到这个数组的起始位置 args.unshift(this) ,这里的 this 指向 Vue 对象；所以我们上面的例子打印的第一个参数都是Vue对象
如果我们传入的 plugin(Vue.use的第一个参数) 的 install 是一个方法。也就是说如果我们传入一个对象，对象中包含 install 方法，那么我们就调用这个 plugin 的 install 方法并将整理好的数组当成参数传入 install 方法中， plugin.install.apply(plugin, args)；
如果我们传入的 plugin 就是一个函数,那么我们就直接调用这个函数并将整理好的数组当成参数传入， plugin.apply(null, args)；
之后给这个插件添加至已经添加过的插件数组中，标示已经注册过 installedPlugins.push(plugin)；
最后返回 Vue 对象。

小结

通过以上分析我们可以知道，在我们以后编写插件的时候可以有两种方式。
一种是将这个插件的逻辑封装成一个对象，最后将在 install 编写业务代码暴露给 Vue 对象。这样做的好处是可以添加任意参数在这个对象上方便将 install 函数封装得更加精简，可拓展性也比较高。
还有一种则是将所有逻辑都编写成一个函数暴露给 Vue。
其实两种方法原理都一样，无非第二种就是将这个插件直接当成 install 函数来处理。
个人觉得第一种方式比较合理。

// 我们可以在这个对象上添加参数，最终Vue只会执行install方法，而其他方法可以作为封装install方法的辅助函数
export const Plugin = {
    count: 0
    install(Vue,options) {
        Vue.component...
        Vue.mixins...
        Vue...
        // 我们也可以在install里面执行其他函数，Vue会将this指向我们的插件,
        // 也就是这个plugin对象
        console.log(this)  // {install: ...,utils: ...}
        this.utils(Vue)    // 执行utils函数
        console.log(this.count) // 0
    },
    utils(Vue) {
        Vue...
        console.log(Vue)  // Vue
    }    
}


// 这种方式我们只能在一个函数中编写插件逻辑，可封装性就不是那么强了
const test = 'test'
export function Plugin2(Vue) {
    Vue...
    console.log(test)  // 'test'
    // 注意如果插件编写成函数形式，那么Vue只会把this指向null，并不会指向这个函数
    console.log(this)  // null
}