Vue中Vue.use()的原理及基本使用

Posted on by

前言

相信很多人在用 Vue 使用別人的組件時，會用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios時，就不需要用 Vue.use(axios)，就能直接使用。那這是為什麼吶？
因為 axios 沒有 install。

1. 舉例理解

在新建的項目中創建兩個文件：plugins.js use.js:

// plugins.js
const Plugin1 = {
  install(a,b){
    console.log('Plugin1 第一個參數：',a)
    console.log('Plugin1 第二個參數：',b)
  }
}

function Plugin2(a,b){
  console.log('Plugin2 第一個參數：',a)
  console.log('Plugin2 第二個參數：',b)
}

export{Plugin1,Plugin2}

// use.js 
import Vue from 'vue'
import {Plugin1,Plugin2} from './plugins'

Vue.use(Plugin1,'參數1')
Vue.use(Plugin2,'參數A')

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/plugins/use'

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

從中可以發現我們在 plugin1 中的 install 方法編寫的兩個 console 都打印出來，第一個打印出來的是Vue對象，第二個是我們傳入的參數。

而 plugin2 沒有 install 方法，它本身就是一個方法，也能打印兩個參數，第一個是Vue對象，第二個是我們傳入的參數。
那麼現在我們是不是大概對Vue.use有一個模糊的猜想～

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
}

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 對象；

如果我們傳入的 plugin(Vue.use的第一個參數) 的 install 是一個方法。也就是說如果我們傳入一個對象，對象中包含 install 方法，那麼我們就調用這個 plugin 的 install 方法並將整理好的數組當成參數傳入 install 方法中， plugin.install.apply(plugin, args)；

如果我們傳入的 plugin 就是一個函數,那麼我們就直接調用這個函數並將整理好的數組當成參數傳入， plugin.apply(null, args)；

之後給這個插件添加至已經添加過的插件數組中，標示已經註冊過 installedPlugins.push(plugin)；
最後返回 Vue 對象。

3. 小結

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

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

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

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

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

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

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

總結

到此這篇關於Vue中Vue.use()的原理及基本使用的文章就介紹到這瞭,更多相關Vue Vue.use()原理及使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：