亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

解讀Vue.use()源碼

funnyZhang / 3366人閱讀

摘要：的作用官方文檔的解釋安裝插件。下面展示源碼源碼中采用了的語法。語法，官方解釋是簡單的意思就是是代碼的靜態(tài)類型檢查工具。官網(wǎng)鏈接使用的好處就是在編譯期對代碼變量做類型檢查，縮短調(diào)試時間，減少因類型錯誤引起的。此時方法內(nèi)的指向?qū)ο蟆?/p>

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

官方文檔的解釋：

安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數(shù)，它會被作為 install 方法。install 方法調(diào)用時，會將 Vue 作為參數(shù)傳入。
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()怎么用還不夠，還要知道它的內(nèi)部是怎么實現(xiàn)的。下面展示源碼：

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代碼的靜態(tài)類型檢查工具。官網(wǎng)鏈接
使用flow的好處就是：在編譯期對js代碼變量做類型檢查，縮短調(diào)試時間， 減少因類型錯誤引起的bug。我們都知道js是解釋執(zhí)行語言，運行的時候才檢查變量的類型，flow可以在編譯階段就對js進行類型檢查。

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

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

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

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

4、toArray()取參數(shù)
代碼：

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()方法傳入的參數(shù)，除第一個參數(shù)外（第一個參數(shù)是插件plugin），其他參數(shù)都存儲到一個數(shù)組中，并且將vue對象插入到參數(shù)數(shù)組的第一位。最后參數(shù)數(shù)組就是[vue,arg1,arg2,...]。

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

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環(huán)境中執(zhí)行，并且傳入args參數(shù)數(shù)組進install方法。此時install方法內(nèi)的this指向plugin對象。
plugin.apply(null, args) plugin內(nèi)的this指向null.

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

總結(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/97339.html

相關(guān)文章

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

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

    Aklman 評論0 收藏0

  • Vue源碼解讀(1)--src/core/index.js 入口文件

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

    tangr206 評論0 收藏0

  • vuex 2.0 源碼解讀

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

    yvonne 評論0 收藏0

  • vuex 2.0源碼解讀（一）

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

    luqiuwen 評論0 收藏0

  • Vue-Socket.io源碼解讀

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

    Guakin_Huang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<