淺談Vue.use的使用

更新時間：2018年08月29日 09:10:39 作者：Frank_Lin

這篇文章主要介紹了淺談Vue.use的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

vue.use（plugin, arguments）語法

參數(shù)：plugin(Function | Object)

用法：

如果vue安裝的組件類型必須為Function或者是Object

如果是個對象，必須提供install方法

如果是一個函數(shù)，會被直接當(dāng)作install函數(shù)執(zhí)行

install函數(shù)接受參數(shù)，默認(rèn)第一個參數(shù)為Vue,其后參數(shù)為注冊組件時傳入的arguments

先舉個?

我們先來看一個簡單的事例

首先我使用官方腳手架新建一個項目vue init webpack vue-demo

然后我創(chuàng)建兩個文件index.js plugins.js.

我將這兩個文件放置在src/classes/vue-use目錄下

接下來對這兩個文件進(jìn)行編寫

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

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

function Plugin2(a, b, c) {
  console.log('Plugin2 第一個參數(shù):', a);
  console.log('Plugin2 第二個參數(shù):', b);
  console.log('Plugin2 第三個參數(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');

然后我們在入口文件main.js引用這段代碼

// 文件: 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),
});

此時我們執(zhí)行npm run dev打開8080端口開啟開發(fā)調(diào)試工具可以看到控制臺輸出以下信息

...]

從中可以發(fā)現(xiàn)我們在plugin1中的install方法編寫的三個console都打印出來，第一個打印出來的是Vue對象，第二個跟第三個是我們傳入的兩個參數(shù)。

而plugin2沒有install方法，它本身就是一個方法，也能打印三個參數(shù)，第一個是Vue對象，第二個跟第三個也是我們傳入的兩個參數(shù)。

那么現(xiàn)在我們是不是大概對Vue.use有一個模糊的猜想～

分析源碼

好我們還是不要猜想，直接上源碼

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

從源碼中我們可以發(fā)現(xiàn)vue首先判斷這個插件是否被注冊過，不允許重復(fù)注冊。

并且接收的plugin參數(shù)的限制是Function | Object兩種類型。

對于這兩種類型有不同的處理。

首先將我們傳入的參數(shù)整理成數(shù)組 => const args = toArray(arguments, 1)。

(toArray源碼)

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

再將Vue對象添加到這個數(shù)組的起始位置args.unshift(this),這里的this 指向Vue對象

如果我們傳入的plugin(Vue.use的第一個參數(shù))的install是一個方法。也就是說如果我們傳入一個對象，對象中包含install方法，那么我們就調(diào)用這個plugin的install方法并將整理好的數(shù)組當(dāng)成參數(shù)傳入install方法中。 => plugin.install.apply(plugin, args)
如果我們傳入的plugin就是一個函數(shù),那么我們就直接調(diào)用這個函數(shù)并將整理好的數(shù)組當(dāng)成參數(shù)傳入。 => plugin.apply(null, args)
之后給這個插件添加至已經(jīng)添加過的插件數(shù)組中，標(biāo)示已經(jīng)注冊過 => installedPlugins.push(plugin)
最后返回Vue對象。

小結(jié)

通過以上分析我們可以知道，在我們以后編寫插件的時候可以有兩種方式。

一種是將這個插件的邏輯封裝成一個對象最后將最后在install編寫業(yè)務(wù)代碼暴露給Vue對象。這樣做的好處是可以添加任意參數(shù)在這個對象上方便將install函數(shù)封裝得更加精簡，可拓展性也比較高。

還有一種則是將所有邏輯都編寫成一個函數(shù)暴露給Vue。

其實兩種方法原理都一樣，無非第二種就是將這個插件直接當(dāng)成install函數(shù)來處理。

個人覺得第一種方式比較合理。

舉個?

export const Plugin = {
  install(Vue) {
    Vue.component...
    Vue.mixins...
    Vue...
    // 我們也可以在install里面執(zhí)行其他函數(shù)，Vue會將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  
}
// 我們可以在這個對象上添加參數(shù)，最終Vue只會執(zhí)行install方法，而其他方法可以作為封裝install方法的輔助函數(shù)

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

小弟不才，對vue源碼的理解暫且到這。歡迎大佬們多指教～

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: