Vue.use的原理和設計源碼探究

更新時間：2023年02月09日 14:35:02 作者：給小葉倒茶

這篇文章主要為大家介紹了Vue.use的原理和設計源碼探究詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

這段時間打算回顧一下Vue的全局方法，腦海里第一個跳出來的方法就是Vue.use，之所以會首先想到它，我覺得和我平時看的面試題相關~~~

Vue.use的原理是面試中常問的點，因為相對于其他全局方法，Vue.use源代碼邏輯清晰，如果了解它，也就代表這個人是看過Vue源碼的?。?！

基本使用

在Vue官網中是這樣說明的：通過全局方法 Vue.use(plugin) 使用插件

首先要知道什么是插件，插件通常用來為 Vue 添加全局功能（過濾器、指令、組件），平時我們使用的UI組件、Axios、Vuex都是插件

Vue.use裝載插件的方式也很簡單

 import Vue from "vue"
 import Element from 'element-ui'
 Vue.use(Element)

并且在Vue官網還介紹了我們如何去開發(fā)插件，只需要暴露一個install方法就可以，在如果Vue.use方法使用插件時，會主動調用install方法

install方法第一個參數(shù)是Vue構造函數(shù)，剩下的參數(shù)則是調用Vue.use方法時，除第一個參數(shù)以外的剩余參數(shù)

 import Vue from "vue"
 let MyPlugin = {
     install(_Vue) {
         console.log(_Vue === Vue)       // true
     }
 }
 Vue.install(MyPlugin)

源碼解析

廢話不說，直接上源碼~~~

 import type { GlobalAPI } from 'types/global-api'
 import { toArray, isFunction } from '../util/index'
 export function initUse(Vue: GlobalAPI) {
     // plugin：類型是 Function|any
   Vue.use = function (plugin: Function | any) { 
     // this是Vue構造函數(shù)
     // _installedPlugins保存了已經被過使用插件
     const installedPlugins = this._installedPlugins || (this._installedPlugins = []) 
     // 判斷當前插件是否已經被使用過
     if (installedPlugins.indexOf(plugin) > -1) {
       // 如果已經被使用，就直接返回Vue構造函數(shù)
       return this
     }
     // 獲取排除第一個參數(shù)之后所剩余的參數(shù)
     const args = toArray(arguments, 1)
     // 向頭部添加Vue構造函數(shù)
     args.unshift(this)
     // 如果 plugin.install 是方法
     if (isFunction(plugin.install)) {
       // 執(zhí)行plugin.install方法
       plugin.install.apply(plugin, args)
     } 
     // 如果 plugin 是函數(shù)
     else if (isFunction(plugin)) {
       // 執(zhí)行plugin.install函數(shù)
       plugin.apply(null, args)
     }
     // plugin已經被使用過了，添加到已使用緩存中
     installedPlugins.push(plugin)
     return this
   }
 }

源碼不一定都很很難，像Vue.use源碼是不是就很簡單

我們從源碼中得到以下信息：

Vue.use會防止重復加載同一個插件
Vue.use可以鏈式調用
plugin只有類型是函數(shù)或者對象的時候才有用，為函數(shù)時，直接運行這個函數(shù)；當為對象時，會判斷對象中是否存在install方法，如果存在，就執(zhí)行這個方法

控制反轉

談論了Vue.use使用和原理，那再講一講設計吧~~~

我們從框架設計者的角度出發(fā)，現(xiàn)在需要允許Vue插件，你會怎樣設計喃？

 function show() {
     console.log("我是插件");
 }

現(xiàn)在需要把show方法添加到Vue原型上，如果沒有提供Vue.use方法，那就會這樣，開發(fā)者手動添加到原型上

 function show() {
     console.log("我是插件");
 }
 Vue.prototype.show = show

顯然這樣是不對，如果明天在有show2方法喃？不可能讓開發(fā)自己加呀，你就首先提出了Vue.use方法幫助開發(fā)者加載插件

 Vue.use = function (plugin) {
     if (typeof plugin === "object") {
         if (plugin.add) {
             plugin.add()
         }
         if (plugin.use) {
             plugin.use()
         }
     } else {
     }
 }

但是這又遇到一個難題，插件的類型多種多樣，有些插件暴露的是add方法，有些時候use，不可能都要適配吧?。?！

所以這個時候你就通知所以插件開發(fā)商，讓他們插件都要向外暴露install方法，沒有這個方法的我們不管，所以問題也都解決了

回到正題，談設計，原本需要開發(fā)者實現(xiàn)的業(yè)務，交給了Vue本身，開發(fā)者只需要提供插件，這種設計叫做控制反轉

也就是把代碼的控制權從開發(fā)者交給Vue本身，如果Vue.use注入插件也叫做依賴注入

以上就是Vue.use的原理和設計源碼探究的詳細內容，更多關于Vue.use原理設計的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: