淺談Vue.use

MingjunYang 發(fā)布于2019-08-21 17:55 / 1932人閱讀

摘要：并且接收的參數(shù)的限制是兩種類(lèi)型。對(duì)于這兩種類(lèi)型有不同的處理。之后給這個(gè)插件添加至已經(jīng)添加過(guò)的插件數(shù)組中，標(biāo)示已經(jīng)注冊(cè)過(guò)最后返回對(duì)象。還有一種則是將所有邏輯都編寫(xiě)成一個(gè)函數(shù)暴露給。個(gè)人覺(jué)得第一種方式比較合理。

先舉個(gè)?

我們先來(lái)看一個(gè)簡(jiǎn)單的事例
首先我使用官方腳手架新建一個(gè)項(xiàng)目vue init webpack vue-demo
然后我創(chuàng)建兩個(gè)文件index.js plugins.js.
我將這兩個(gè)文件放置在src/classes/vue-use目錄下

接下來(lái)對(duì)這兩個(gè)文件進(jìn)行編寫(xiě)

// 文件:  src/classes/vue-use/plugins.js

const Plugin1 = {
    install(a, b, c) {
        console.log("Plugin1 第一個(gè)參數(shù):", a);
        console.log("Plugin1 第二個(gè)參數(shù):", b);
        console.log("Plugin1 第三個(gè)參數(shù):", c);
    },
};

function Plugin2(a, b, c) {
    console.log("Plugin2 第一個(gè)參數(shù):", a);
    console.log("Plugin2 第二個(gè)參數(shù):", b);
    console.log("Plugin2 第三個(gè)參數(shù):", c);
}

export { Plugin1, Plugin2 };

// 文件: src/classes/vue-use/index.js

import Vue from "vue";

import { Plugin1, Plugin2 } from "./plugins";

Vue.use(Plugin1, "參數(shù)1", "參數(shù)2");
Vue.use(Plugin2, "參數(shù)A", "參數(shù)B");

然后我們?cè)谌肟谖募?b>main.js引用這段代碼

// 文件: src/main.js

import Vue from "vue";

import "@/classes/vue-use";
import App from "./App";
import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
    el: "#app",
    router,
    render: h => h(App),
});

此時(shí)我們執(zhí)行npm run dev打開(kāi)8080端口開(kāi)啟開(kāi)發(fā)調(diào)試工具可以看到控制臺(tái)輸出以下信息
...]

從中可以發(fā)現(xiàn)我們?cè)?b>plugin1中的install方法編寫(xiě)的三個(gè)console都打印出來(lái)，第一個(gè)打印出來(lái)的是Vue對(duì)象，第二個(gè)跟第三個(gè)是我們傳入的兩個(gè)參數(shù)。
而plugin2沒(méi)有install方法，它本身就是一個(gè)方法，也能打印三個(gè)參數(shù)，第一個(gè)是Vue對(duì)象，第二個(gè)跟第三個(gè)也是我們傳入的兩個(gè)參數(shù)。

那么現(xiàn)在我們是不是大概對(duì)Vue.use有一個(gè)模糊的猜想～

分析源碼

好我們還是不要猜想，直接上源碼

// Vue源碼文件路徑：src/core/global-api/use.js

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兩種類(lèi)型。
對(duì)于這兩種類(lèi)型有不同的處理。
首先將我們傳入的參數(shù)整理成數(shù)組 => const args = toArray(arguments, 1)。
(toArray源碼)

// Vue源碼文件路徑：src/core/shared/util.js

export function toArray (list: any, start?: number): Array {
  start = start || 0
  let i = list.length - start
  const ret: Array = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}

再將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ì)象。

小結(jié)

通過(guò)以上分析我們可以知道，在我們以后編寫(xiě)插件的時(shí)候可以有兩種方式。
一種是將這個(gè)插件的邏輯封裝成一個(gè)對(duì)象最后將最后在install編寫(xiě)業(yè)務(wù)代碼暴露給Vue對(duì)象。這樣做的好處是可以添加任意參數(shù)在這個(gè)對(duì)象上方便將install函數(shù)封裝得更加精簡(jiǎn)，可拓展性也比較高。
還有一種則是將所有邏輯都編寫(xiě)成一個(gè)函數(shù)暴露給Vue。
其實(shí)兩種方法原理都一樣，無(wú)非第二種就是將這個(gè)插件直接當(dāng)成install函數(shù)來(lái)處理。
個(gè)人覺(jué)得第一種方式比較合理。
舉個(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"
    // 注意如果插件編寫(xiě)成函數(shù)形式，那么Vue只會(huì)把this指向null，并不會(huì)指向這個(gè)函數(shù)
    console.log(this)  // null
}
// 這種方式我們只能在一個(gè)函數(shù)中編寫(xiě)插件邏輯，可封裝性就不是那么強(qiáng)了

小弟不才，對(duì)vue源碼的理解暫且到這。歡迎大佬們多指教～

云服務(wù)器 GPU云服務(wù)器設(shè)計(jì)淺談淺談javascript 淺談sdwan解決方案淺談?wù)齽t表達(dá)式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90196.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MingjunYang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow怎么訓(xùn)練

閱讀 2734·2023-04-26 02:28
STM32學(xué)習(xí)——半天學(xué)完正點(diǎn)原子入門(mén)篇例程，STM32：學(xué)會(huì)了嗎？我：學(xué)廢了?

閱讀 2566·2021-09-27 13:36
一、初識(shí)c語(yǔ)言

閱讀 3137·2021-09-03 10:29
Sharktech：美國(guó)洛杉磯公有云產(chǎn)品上線/16核32GB內(nèi)存/超大存儲(chǔ)和流量，最多16個(gè)IP/月

閱讀 2770·2021-08-26 14:14
CSS布局

閱讀 2113·2019-08-30 15:56
筆記：flex 的完備性與正交性

閱讀 846·2019-08-29 13:46
這些Zepto中實(shí)用的方法集

閱讀 2618·2019-08-29 13:15
水平垂直居中

閱讀 462·2019-08-29 11:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

淺談Vue.use

相關(guān)文章

**好用的Vue狀態(tài)管理模式：淺談Vuet在實(shí)際應(yīng)用中解決的問(wèn)題**

**淺談vuex**

**淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁(yè)面應(yīng)用開(kāi)發(fā)底層**

**淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁(yè)面應(yīng)用開(kāi)發(fā)底層**

前端最實(shí)用書(shū)簽(持續(xù)更新)

發(fā)表評(píng)論

0條評(píng)論

MingjunYang

男|高級(jí)講師

TA的文章

tensorflow怎么訓(xùn)練

STM32學(xué)習(xí)——半天學(xué)完正點(diǎn)原子入門(mén)篇例程，STM32：學(xué)會(huì)了嗎？我：學(xué)廢了?

一、初識(shí)c語(yǔ)言

Sharktech：美國(guó)洛杉磯公有云產(chǎn)品上線/16核32GB內(nèi)存/超大存儲(chǔ)和流量，最多16個(gè)IP/月

CSS布局

筆記：flex 的完備性與正交性

這些Zepto中實(shí)用的方法集

水平垂直居中

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

淺談Vue.use

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！