Vue.use源码分析

Vue.use源码分析

我想有过vue开发经验的，对于vue.use并不陌生。当使用vue-resource或vue-router等全局组件时，必须通过Vue.use方法引入，才起作用。那么vue.use在组件引入之前到底做了那些事情呢？让我们一窥究竟。

先上vue.use源码

Vue.use = function (plugin) {
    /* istanbul ignore if */
    if (plugin.installed) {
      return
    }
    // additional parameters
    var 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);
    }
    plugin.installed = true;
    return this
  };

假设我们通过Vue.use引入一个插件plugin(该插件可以暂时理解为一个变量或参数),即Vue.use(plugin);

首先判断传入的参数plugin的属性installed是否存在，如果存在且逻辑值为真，那么直接返回，后边的代码就不会在执行，这个判断的作用是什么呢？后边会讲到。

我们先假设plugin的属性installed不存在或为假，那么继续往下执行

var args = toArray(arguments, 1);
//执行了一个toArray方法，toArray接收了两个参数，arguments为Vue.use方法传入的参数集合，例如Vue.use(a,b,c),那么arguments类似于[a,b,c]（说明：arguments只是类数组，并不是真正的数组）
此处因为我们只引入一个参数plugin,所以arguments类似于[plugin]。

toArray的作用是什么呢？看源码。

function toArray (list, start) {
  start = start || 0;
  var i = list.length - start;
  var ret = new Array(i);
  while (i--) {
    ret[i] = list[i + start];
  }
  return ret
}

当执行toArray(arguments,1)，会生成一个新数组ret，长度 = arguments.length-1，然后进行while循环，依次倒序把arguments的元素赋值给ret,因为ret比arguments长度少1，所以最终等同于arguments把除了第一个元素外的其余元素赋值给ret。toArray主要作用就是把类数组转化为真正的数组，这样才能调用数组的方法。因为此处我只引入一个plugin参数，即arguments=[plugin]，所以toArray返回为空数组[]。

接着往下执行，args.unshift(this)，等同于[].unshift(Vue),即args = [Vue];

然后执行

if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }

此处判断plugin的install是否为函数，如果为函数，立即执行pluign.install方法，install方法传入的参数为args内数组元素，即install接受的第一个参数为Vue.

如果plugin的install不是函数，那么判断plugin本身是否为函数，如果为函数，那么执行plugin函数，且参数为args内数组元素。

最后设置plugin.installed为true。设置plugin.installed为true的作用是避免同一个插件多次执行安装，比如Vue.use(plugin)执行一次之后，installed为true,再次执行的话走到第一步判断就返回了。

综上所述，Vue.use的作用其实就是执行一个plugin函数或者执行pluign的install方法进行插件注册，并且向plugin或其install方法传入Vue对象作为第一个参数，use的其他参数作为plugin或install的其他参数。

举个简单的例子

import Vue from 'vue'

function test(a){
   console.log(a);//Vue
}

function test1(a,b){
　　console.log(a,b);//Vue hello

}

let oTest = {
   install：function(a,b){
      console.log(a,b);//Vue hello1
   }
}

Vue.use(test);

Vue.use(test1,'hello');

Vue.use(oTest,'hello1')

console.log(oTest);
//{
　　install:function(){...},
　　installed:true
}




Vue.use自定义自己的全局组件
 通常我们在vue里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。今天我简单的也来use一个自己的组件。
这里我用的webpack-simple这个简单版本的脚手架为例，安装就不啰嗦了，直接进入正题
首先看下目前的项目结构：
webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明
 
 

  
  

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

// 引入element-ui组件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

// 引入自定义组件。index.js是组件的默认入口
import Loading from '../components/loading'
Vue.use(Loading);

Vue.use(ElementUi);
new Vue({
  el: '#app',
  render: h => h(App)
})
  
  

   
   
  
  
 
 
然后在Loading.vue里面定义自己的组件模板
 
 

  
  

   
   
  
  
  
  
<!-- 这里和普通组件的书写一样 -->
<template>
    <div class="loading">
        loading...
    </div>
</template>
  
  

   
   
  
  
 
 
在index.js文件里面添加install方法
 
 

  
  

   
   
  
  
  
  
import MyLoading from './Loading.vue'
// 这里是重点
const Loading = {
    install: function(Vue){
        Vue.component('Loading',MyLoading)
    }
}

// 导出组件
export default Loading
  
  

   
   
  
  
 
 
接下来就是在App.Vue里面使用组件了，这个组件已经在main.js定义加载了
 
 

  
  
 
 
<template>
  <div id="app">
  <!-- 使用element ui的组件 -->
  <el-button>默认按钮</el-button>

  <!-- 使用自定义组件 -->
  <Loading></Loading>
  </div>
</template>