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

更新時間：2021年10月08日 09:08:20 作者：明天也要努力

相信很多人在用Vue使用別人的組件時,會用到 Vue.use() ,例如：Vue.use(VueRouter)、Vue.use(MintUI),這篇文章主要給大家介紹了關于Vue中Vue.use()的原理及基本使用的相關資料,需要的朋友可以參考下

前言

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

1. 舉例理解

在新建的項目中創(chuàng)建兩個文件：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')

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

而 plugin2 沒有 install 方法，它本身就是一個方法，也能打印兩個參數，第一個是Vue對象，第二個是我們傳入的參數。
那么現(xiàn)在我們是不是大概對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
  }
}

從源碼中我們可以發(fā)現(xiàn) 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 編寫業(yè)務代碼暴露給 Vue 對象。這樣做的好處是可以添加任意參數在這個對象上方便將 install 函數封裝得更加精簡，可拓展性也比較高。

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

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

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

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

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