淺談Vue.use的使用

// 文件: src/classes/vue-use/plugins.js

const Plugin1 = {
  install(a, b, c) {
    console.log('Plugin1 第一個(gè)參數(shù):', a);
    console.log('Plugin1 第二個(gè)參數(shù):', b);
    console.log('Plugin1 第三個(gè)參數(shù):', c);
  },
};

function Plugin2(a, b, c) {
  console.log('Plugin2 第一個(gè)參數(shù):', a);
  console.log('Plugin2 第二個(gè)參數(shù):', b);
  console.log('Plugin2 第三個(gè)參數(shù):', c);
}

export { Plugin1, Plugin2 };

// 文件: src/classes/vue-use/index.js

import Vue from 'vue';

import { Plugin1, Plugin2 } from './plugins';

Vue.use(Plugin1, '參數(shù)1', '參數(shù)2');
Vue.use(Plugin2, '參數(shù)A', '參數(shù)B');

// 文件: src/main.js

import Vue from 'vue';

import '@/classes/vue-use';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

// Vue源碼文件路徑：src/core/global-api/use.js

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源碼文件路徑：src/core/shared/util.js

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
}

export const Plugin = {
  install(Vue) {
    Vue.component...
    Vue.mixins...
    Vue...
    // 我們也可以在install里面執(zhí)行其他函數(shù)，Vue會(huì)將this指向我們的插件
    console.log(this) // {install: ...,utils: ...}
    this.utils(Vue)  // 執(zhí)行utils函數(shù)
    console.log(this.COUNT) // 0
  },
  utils(Vue) {
    Vue...
    console.log(Vue) // Vue
  },
  COUNT: 0  
}
// 我們可以在這個(gè)對(duì)象上添加參數(shù)，最終Vue只會(huì)執(zhí)行install方法，而其他方法可以作為封裝install方法的輔助函數(shù)

const test = 'test'
export function Plugin2(Vue) {
  Vue...
  console.log(test) // 'test'
  // 注意如果插件編寫成函數(shù)形式，那么Vue只會(huì)把this指向null，并不會(huì)指向這個(gè)函數(shù)
  console.log(this) // null
}
// 這種方式我們只能在一個(gè)函數(shù)中編寫插件邏輯，可封裝性就不是那么強(qiáng)了