解讀Vue.use()源碼

funnyZhang 發布于2019-08-23 11:42 / 3306人閱讀

摘要：的作用官方文檔的解釋安裝插件。下面展示源碼源碼中采用了的語法。語法，官方解釋是簡單的意思就是是代碼的靜態類型檢查工具。官網鏈接使用的好處就是在編譯期對代碼變量做類型檢查，縮短調試時間，減少因類型錯誤引起的。此時方法內的指向對象。

Vue.use() vue.use()的作用：

官方文檔的解釋：

安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數，它會被作為 install 方法。install 方法調用時，會將 Vue 作為參數傳入。

vue.use()使用情景:

可以在項目中使用vue.use()全局注入一個插件，從而不需要在每個組件文件中import插件。例如：
不使用vue.use()注入插件：

const utils = require("./utils")
// 或者
import utils from "./utils"

使用vue.use()注入插件，最典型的案例：

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

使用了vue.use()注冊插件之后就可以在所有的vue文件中使用路由：
this.$route

vue.use()源碼

下面切入本文的主題。我們知道了vue.use()怎么用還不夠，還要知道它的內部是怎么實現的。下面展示源碼：

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.use()源碼中采用了flow的語法。flow語法，官方解釋是：

Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale.

簡單的意思就是flow是JavaScript代碼的靜態類型檢查工具。官網鏈接
使用flow的好處就是：在編譯期對js代碼變量做類型檢查，縮短調試時間，減少因類型錯誤引起的bug。我們都知道js是解釋執行語言，運行的時候才檢查變量的類型，flow可以在編譯階段就對js進行類型檢查。

下面將對vue.use()源碼進行解讀：

1、首先先判斷插件plugin是否是對象或者函數：
Vue.use = function (plugin: Function | Object)

2、判斷vue是否已經注冊過這個插件
installedPlugins.indexOf(plugin) > -1
如果已經注冊過，跳出方法

3、取vue.use參數。
const args = toArray(arguments, 1)

4、toArray()取參數
代碼：

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
  }

let i = list.length - start意思是vue.use()方法傳入的參數，除第一個參數外（第一個參數是插件plugin），其他參數都存儲到一個數組中，并且將vue對象插入到參數數組的第一位。最后參數數組就是[vue,arg1,arg2,...]。

5、判斷插件是否有install方法，如果有就執行install()方法。沒有就直接把plugin當Install執行。

if (typeof plugin.install === "function") {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === "function") {
      plugin.apply(null, args)
    }

plugin.install.apply(plugin, args)將install方法綁定在plugin環境中執行，并且傳入args參數數組進install方法。此時install方法內的this指向plugin對象。
plugin.apply(null, args) plugin內的this指向null.

最后告知vue該插件已經注冊過installedPlugins.push(plugin)保證每個插件只會注冊一次。

總結

使用vue.use()注冊插件，插件可以是一個函數，可以是一個帶有install屬性的對象。不管是函數還是install方法,第一個參數總是vue對象。
個人還是喜歡使用將插件的功能方法寫在install方法里。因為install內的this指向的是plugin對象自身，擴展性更好。

GPU云服務器云服務器源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀 js v8源碼解讀

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

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

【前端詞典】從源碼解讀 Vuex 注入 Vue 生命周期的過程

摘要：第一篇文章我會結合和的部分源碼，來說明注入生命周期的過程。說到源碼，其實沒有想象的那么難。但是源碼的調用樹會復雜很多。應用的業務代碼逐漸復雜，事件事件總線等通信的方式的弊端就會愈發明顯。狀態管理是組件解耦的重要手段。前言這篇文章是【前端詞典】系列文章的第 13 篇文章，接下的 9 篇我會圍繞著 Vue 展開，希望這 9 篇文章可以使大家加深對 Vue 的了解。當然這些文章的前提是默認你對 ...

Aklman 2019-05-21 16:00 評論0 收藏0
Vue源碼解讀(1)--src/core/index.js 入口文件

摘要：生產版本設為可以啟用檢查。只適用于開發模式和支持的瀏覽器上指定組件的渲染和觀察期間未捕獲錯誤的處理函數為的運行時警告賦予一個自定義處理函數。注意這只會在開發者環境下生效，在生產環境下它會被忽略。 Vue源碼主入口:src/core/index.js import Vue from ./instance/index // 引用Vue構造器 import { initGlobalAPI }...

tangr206 2019-08-22 17:36 評論0 收藏0
vuex 2.0 源碼解讀

摘要：至此它便作為一個唯一數據源而存在。改變中的狀態的唯一途徑就是顯式地提交。這樣使得可以方便地跟蹤每一個狀態的變化，從而能夠實現一些工具幫助更好地了解應用背后的基本思想，借鑒了和參考源碼解讀一架構入門教程狀態管理準備工作 1.下載安裝運行這里以2.0.0-rc.6為例官網github下載鏈接(對應版本):https://github.com/vuejs/vuex...點擊下載到本地 ...

yvonne 2019-08-23 12:21 評論0 收藏0
vuex 2.0源碼解讀（一）

摘要：簡單點說，當你使用構造函數，它實際上做了這么幾件事，首先定義給實例定義一些內部屬性，之后就是綁定和的上下文對象永遠是實例上，之后根據傳入的充實內部狀態等等。函數執行的結果是返回一個對象，屬性名對應于傳入的對象或者數組元素。轉載請注明出處 https://segmentfault.com/a/11... vuex2.0 和 vuex1.x 相比，API改變的還是很多的，但基本思想沒什么...

luqiuwen 2019-08-20 11:32 評論0 收藏0
Vue-Socket.io源碼解讀

摘要：刪除時，就是取消監聽該事件了，將賦值時壓進回調數組的那個回調函數，刪除，表示，我不監聽了。這段代碼先判斷中是否之前已經存儲過了該事件，如果沒有，初始化該事件對應的值為空數組，然后將當前的回調函數，壓進去，反之，直接壓進去。背景有一個項目，今年12月份開始重構，項目涉及到了socket。但是socket用的是以前一個開發人員封裝的包（這個一直被當前的成員吐槽為什么不用已經千錘百煉的輪...

Guakin_Huang 2019-08-22 11:21 評論0 收藏0