快捷導(dǎo)航

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

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

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

前言

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

1. 舉例理解

在新建的項(xiàng)目中創(chuàng)建兩個(gè)文件：plugins.js use.js:

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

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

export{Plugin1,Plugin2}

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

Vue.use(Plugin1,'參數(shù)1')
Vue.use(Plugin2,'參數(shù)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)我們?cè)?plugin1 中的 install 方法編寫的兩個(gè) console 都打印出來(lái)，第一個(gè)打印出來(lái)的是Vue對(duì)象，第二個(gè)是我們傳入的參數(shù)。

而 plugin2 沒(méi)有 install 方法，它本身就是一個(gè)方法，也能打印兩個(gè)參數(shù)，第一個(gè)是Vue對(duì)象，第二個(gè)是我們傳入的參數(shù)。
那么現(xiàn)在我們是不是大概對(duì)Vue.use有一個(gè)模糊的猜想～

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 首先判斷這個(gè)插件是否被注冊(cè)過(guò)，不允許重復(fù)注冊(cè)，并且接收的 plugin 參數(shù)的限制是 Function | Object 兩種類型。

對(duì)于這兩種類型有不同的處理。

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

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

如果我們傳入的 plugin(Vue.use的第一個(gè)參數(shù)) 的 install 是一個(gè)方法。也就是說(shuō)如果我們傳入一個(gè)對(duì)象，對(duì)象中包含 install 方法，那么我們就調(diào)用這個(gè) plugin 的 install 方法并將整理好的數(shù)組當(dāng)成參數(shù)傳入 install 方法中， plugin.install.apply(plugin, args)；

如果我們傳入的 plugin 就是一個(gè)函數(shù),那么我們就直接調(diào)用這個(gè)函數(shù)并將整理好的數(shù)組當(dāng)成參數(shù)傳入， plugin.apply(null, args)；

之后給這個(gè)插件添加至已經(jīng)添加過(guò)的插件數(shù)組中，標(biāo)示已經(jīng)注冊(cè)過(guò) installedPlugins.push(plugin)；
最后返回 Vue 對(duì)象。

3. 小結(jié)

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

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

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

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

個(gè)人覺得第一種方式比較合理。

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)了