淺談Vue.use

MingjunYang 發布于2019-08-21 17:55 / 1921人閱讀

摘要：并且接收的參數的限制是兩種類型。對于這兩種類型有不同的處理。之后給這個插件添加至已經添加過的插件數組中，標示已經注冊過最后返回對象。還有一種則是將所有邏輯都編寫成一個函數暴露給。個人覺得第一種方式比較合理。

先舉個?

我們先來看一個簡單的事例
首先我使用官方腳手架新建一個項目vue init webpack vue-demo
然后我創建兩個文件index.js plugins.js.
我將這兩個文件放置在src/classes/vue-use目錄下

接下來對這兩個文件進行編寫

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

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

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

export { Plugin1, Plugin2 };

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

import Vue from "vue";

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

Vue.use(Plugin1, "參數1", "參數2");
Vue.use(Plugin2, "參數A", "參數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),
});

此時我們執行npm run dev打開8080端口開啟開發調試工具可以看到控制臺輸出以下信息
...]

從中可以發現我們在plugin1中的install方法編寫的三個console都打印出來，第一個打印出來的是Vue對象，第二個跟第三個是我們傳入的兩個參數。
而plugin2沒有install方法，它本身就是一個方法，也能打印三個參數，第一個是Vue對象，第二個跟第三個也是我們傳入的兩個參數。

那么現在我們是不是大概對Vue.use有一個模糊的猜想～

分析源碼

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

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

從源碼中我們可以發現vue首先判斷這個插件是否被注冊過，不允許重復注冊。
并且接收的plugin參數的限制是Function | Object兩種類型。
對于這兩種類型有不同的處理。
首先將我們傳入的參數整理成數組 => 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對象添加到這個數組的起始位置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對象。

小結

通過以上分析我們可以知道，在我們以后編寫插件的時候可以有兩種方式。
一種是將這個插件的邏輯封裝成一個對象最后將最后在install編寫業務代碼暴露給Vue對象。這樣做的好處是可以添加任意參數在這個對象上方便將install函數封裝得更加精簡，可拓展性也比較高。
還有一種則是將所有邏輯都編寫成一個函數暴露給Vue。
其實兩種方法原理都一樣，無非第二種就是將這個插件直接當成install函數來處理。
個人覺得第一種方式比較合理。
舉個?

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

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

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

GPU云服務器云服務器設計淺談淺談javascript 淺談sdwan解決方案淺談正則表達式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90196.html

好用的Vue狀態管理模式：淺談Vuet在實際應用中解決的問題

摘要：而的狀態測試更類似于單元測試，和組件的依賴較低，組件只會存在調用模塊的方法或者讀取狀態，在組件頻繁的改動中，而的改動相對會較小，所以狀態測試便會存在一定的價值。父子組件通信 showImg(https://segmentfault.com/img/remote/1460000010761687); Vuet提供了模塊化的狀態管理，通過對一個組件的注入，再向其子組件進行分發，使得我們可...

WilsonLiu95 2019-08-21 12:03 評論0 收藏0
淺談vuex

摘要：概念淺談是一個專為應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。更改的中的狀態的唯一方法，類似。允許我們將分割成模塊。通過購物車的一個案列，把vuex學習了一篇。 vuex概念淺談 Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以...

chaos_G 2019-08-23 13:50 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

rickchen 2019-08-22 18:29 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

Backache 2019-08-22 18:29 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0