vue.use 就是给将被调用的组件传入 vue 本身

个人理解，多多指教

• 用法

如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

• demo （自定义插件）

  • use.js

  import Vue from 'vue';
  //引入自定义组件
  import {sortStr,loadingTemp} from './index';
  Vue.use(sortStr);
  Vue.use(loadingTemp);
  

  • plugin.js

  const sortStr = {
      install(Vue) {
          Vue.prototype.sortStr = (str = '') => str.split('').sort().join('');
      }
  };
  function loadingTemp(Vue,arr = []) {
      let _temp = '<div>loading..</div>'
      Vue.component('Loading',{
          template: _temp
      })
  }
  export {sortStr,loadingTemp}
  

  • main.js 需要引入 js

  import './use.js'
  

  • 组件中直接使用

  `<Loading></Loading>`
  
  this.sortStr('cba');
  //console abc
  

• 源码（注解）

Vue.use = function (plugin: Function | Object) {
    //通过 indexOf 判断的是插件中是否已经存在该插件
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    //处理参数 把原有的参数转换成数组
    const args = toArray(arguments, 1);
    //在第一位插入this（VUE）
    args.unshift(this)
   
    if (typeof plugin.install === 'function') {
        //定义了install函数
        plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
        //本身就是一个函数
        plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }