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

資訊專欄INFORMATION COLUMN

解讀Vue.use()源碼

funnyZhang / 3323人閱讀

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

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

官方文檔的解釋：

安裝 Vue.js 插件。如果插件是一個(gè)對(duì)象，必須提供 install 方法。如果插件是一個(gè)函數(shù)，它會(huì)被作為 install 方法。install 方法調(diào)用時(shí)，會(huì)將 Vue 作為參數(shù)傳入。
vue.use()使用情景:

可以在項(xiàng)目中使用vue.use()全局注入一個(gè)插件，從而不需要在每個(gè)組件文件中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()注冊(cè)插件之后就可以在所有的vue文件中使用路由：
this.$route

vue.use()源碼

下面切入本文的主題。我們知道了vue.use()怎么用還不夠，還要知道它的內(nèi)部是怎么實(shí)現(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.

簡(jiǎn)單的意思就是flow是JavaScript代碼的靜態(tài)類型檢查工具。官網(wǎng)鏈接
使用flow的好處就是：在編譯期對(duì)js代碼變量做類型檢查，縮短調(diào)試時(shí)間， 減少因類型錯(cuò)誤引起的bug。我們都知道js是解釋執(zhí)行語言，運(yùn)行的時(shí)候才檢查變量的類型，flow可以在編譯階段就對(duì)js進(jìn)行類型檢查。

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

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

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

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ù)，除第一個(gè)參數(shù)外（第一個(gè)參數(shù)是插件plugin），其他參數(shù)都存儲(chǔ)到一個(gè)數(shù)組中，并且將vue對(duì)象插入到參數(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ù)組進(jìn)install方法。此時(shí)install方法內(nèi)的this指向plugin對(duì)象。
plugin.apply(null, args) plugin內(nèi)的this指向null.

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

總結(jié)

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

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

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

相關(guān)文章

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

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

    Aklman 評(píng)論0 收藏0

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

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

    tangr206 評(píng)論0 收藏0

  • vuex 2.0 源碼解讀

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

    yvonne 評(píng)論0 收藏0

  • vuex 2.0源碼解讀（一）

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

    luqiuwen 評(píng)論0 收藏0

  • Vue-Socket.io源碼解讀

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

    Guakin_Huang 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<