Vue.use的原理和設(shè)計(jì)源碼探究

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

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

前言

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

Vue.use的原理是面試中常問的點(diǎn)，因?yàn)橄鄬τ谄渌址椒ǎ?code>Vue.use源代碼邏輯清晰，如果了解它，也就代表這個(gè)人是看過Vue源碼的?。?！

基本使用

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

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

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

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

并且在Vue官網(wǎng)還介紹了我們?nèi)绾稳ラ_發(fā)插件，只需要暴露一個(gè)install方法就可以，在如果Vue.use方法使用插件時(shí)，會(huì)主動(dòng)調(diào)用install方法

install方法第一個(gè)參數(shù)是Vue構(gòu)造函數(shù)，剩下的參數(shù)則是調(diào)用Vue.use方法時(shí)，除第一個(gè)參數(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構(gòu)造函數(shù)
     // _installedPlugins保存了已經(jīng)被過使用插件
     const installedPlugins = this._installedPlugins || (this._installedPlugins = []) 
     // 判斷當(dāng)前插件是否已經(jīng)被使用過
     if (installedPlugins.indexOf(plugin) > -1) {
       // 如果已經(jīng)被使用，就直接返回Vue構(gòu)造函數(shù)
       return this
     }
     // 獲取排除第一個(gè)參數(shù)之后所剩余的參數(shù)
     const args = toArray(arguments, 1)
     // 向頭部添加Vue構(gòu)造函數(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已經(jīng)被使用過了，添加到已使用緩存中
     installedPlugins.push(plugin)
     return this
   }
 }

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

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

Vue.use會(huì)防止重復(fù)加載同一個(gè)插件
Vue.use可以鏈?zhǔn)秸{(diào)用
plugin只有類型是函數(shù)或者對象的時(shí)候才有用，為函數(shù)時(shí)，直接運(yùn)行這個(gè)函數(shù)；當(dāng)為對象時(shí)，會(huì)判斷對象中是否存在install方法，如果存在，就執(zhí)行這個(gè)方法

控制反轉(zhuǎn)

談?wù)摿?code>Vue.use使用和原理，那再講一講設(shè)計(jì)吧~~~

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

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

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

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

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

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

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

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

以上就是Vue.use的原理和設(shè)計(jì)源碼探究的詳細(xì)內(nèi)容，更多關(guān)于Vue.use原理設(shè)計(jì)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: