人人都能懂的Vue源碼系列—07—initProxy

vspiders 發(fā)布于2019-08-22 17:09 / 3471人閱讀

摘要：不同的代碼運行環(huán)境賦值的結果不同。當訪問的屬性不是類型或者屬性值在被代理的對象上不存在，則拋出錯誤提示，否則就返回該屬性值。該方法可以在開發(fā)者錯誤的調用屬性時，提供提示作用。只不過目前規(guī)范還沒有很完善，使用的時候要稍加注意。

前幾篇文章中，我們主要講了merge options的一些操作。今天我們回到init方法往下講。

if (process.env.NODE_ENV !== "production") {
  initProxy(vm)
} else {
  vm._renderProxy = vm
}

上面的代碼邏輯很簡單，主要就是為Vue實例的_renderProxy屬性賦值。不同的代碼運行環(huán)境賦值的結果不同。

當前環(huán)境是開發(fā)環(huán)境，則調用initProxy方法

如果不是開發(fā)環(huán)境，則vue實例的_renderProxy屬性指向vue實例本身。

initProxy

接下來看initProxy方法究竟怎么樣代理vm屬性呢？

  initProxy = function initProxy (vm) {
    if (hasProxy) {
      // determine which proxy handler to use
      const options = vm.$options
      const handlers = options.render && options.render._withStripped
        ? getHandler
        : hasHandler
      vm._renderProxy = new Proxy(vm, handlers)
    } else {
      vm._renderProxy = vm
    }
  }

先來看hasProxy的代碼

  const hasProxy =
    typeof Proxy !== "undefined" &&
    Proxy.toString().match(/native code/)

從變量的名字我們知道它的作用就是判斷當前環(huán)境中Proxy是否可用。同學們如果不熟悉Proxy的用法，可以點擊這里。這個判斷方法在我們平時寫代碼中也可以進行借鑒。
回到代碼中，如果當前環(huán)境存在Proxy，則執(zhí)行塊內的語句。

  const options = vm.$options
  const handlers = options.render && options.render._withStripped
    ? getHandler
    : hasHandler

上面兩行代碼的邏輯是，如果options上存在render屬性，且render屬性上存在_withStripped屬性，則proxy的traps(traps其實也就是自定義方法)采用getHandler方法,否則采用hasHandler方法。更多關于traps相關的內容可點擊這里。
接下來看看getHandler和hasHandler方法

  const getHandler = {
    get (target, key) {
      if (typeof key === "string" && !(key in target)) {
        warnNonPresent(target, key)
      }
      return target[key]
    }
  }

getHandler方法主要是針對讀取代理對象的某個屬性時進行的操作。當訪問的屬性不是string類型或者屬性值在被代理的對象上不存在，則拋出錯誤提示，否則就返回該屬性值。
該方法可以在開發(fā)者錯誤的調用vm屬性時，提供提示作用。

  const hasHandler = {
    has (target, key) {
      const has = key in target
      const isAllowed = allowedGlobals(key) || key.charAt(0) === "_"
      if (!has && !isAllowed) {
        warnNonPresent(target, key)
      }
      return has || !isAllowed
    }
  }

hasHandler方法的應用場景在于查看vm實例是否擁有某個屬性。比如調用for in循環(huán)遍歷vm實例屬性時，會觸發(fā)hasHandler方法。
首先使用in操作符判斷該屬性是否在vm實例上存在。

const has = key in target

接下來通過下列語句，看屬性名稱是否可用？

const isAllowed = allowedGlobals(key) || key.charAt(0) === "_"

allowedGlobals的定義如下

 const allowedGlobals = makeMap(
    "Infinity,undefined,NaN,isFinite,isNaN," +
    "parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent," +
    "Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl," +
    "require" // for Webpack/Browserify
  )

我們結合makeMap函數(shù)一起來看

export function makeMap (
  str: string,
  expectsLowerCase?: boolean
): (key: string) => true | void {
  const map = Object.create(null)
  const list: Array = str.split(",")
  for (let i = 0; i < list.length; i++) {
    map[list[i]] = true
  }
  return expectsLowerCase
    ? val => map[val.toLowerCase()]
    : val => map[val]
}

先來分析makeMap，其作用是通過傳入的string參數(shù)來生成映射表。如傳入下列參數(shù)

"Infinity,undefined,NaN,isFinite,isNaN,"
....

通過makeMap方法可以生成下面這樣的一個映射表

{
  Infinity: true,
  undefined: true
  ......
}

這個方法非常有用，我們在日常寫代碼的時候也可以進行借鑒。
回到hasHandler源碼中。allowedGlobals最終存儲的是一個代表特殊屬性名稱的映射表。
所以結合has和isAllowed屬性，我們知道當讀取對象屬性時，如果屬性名在vm上不存在，且不在特殊屬性名稱映射表中，或沒有以_符號開頭。則拋出異常。
最后回到initProxy代碼中

  if (hasProxy) {
      ...
      vm._renderProxy = new Proxy(vm, handlers)
    } else {
      vm._renderProxy = vm
    }
  }

如果Proxy屬性存在，則把包裝后的vm屬性賦值給_renderProxy屬性值。否則把vm是實例本身賦值給_renderProxy屬性

總結

The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).

代理對象是es6的新特性，它主要用來自定義對象一些基本操作（如查找，賦值，枚舉等）。
我們上面講的這些代碼主要應用了lookup和enumeration部分的自定義能力。proxy是一個強大的特性，為我們提供了很多"元編程"能力。只不過目前規(guī)范還沒有很完善，使用的時候要稍加注意。最后按照我們的老規(guī)矩，以一張圖完成今天的講解。

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

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

人人都能懂的Vue源碼系列—02—Vue構造函數(shù)

摘要：果然我們找到了的構造函數(shù)定義。告訴你是一個構造函數(shù)，需要用操作符去調用。在深入方法之前，我們先把目光移到文件里在的構造函數(shù)定義之后，有一系列方法會被立即調用。下篇博文主要介紹相關的內容，涉及到原型鏈和構造函數(shù)以及部分的實現(xiàn)，敬請期待上篇博文中說到了Vue源碼的目錄結構是什么樣的，每個目錄的作用我們應該也有所了解。我們知道core/instance目錄主要是用來實例化Vue對象，所以我...

X_AirDu 2019-08-22 16:32 評論0 收藏0
人人都能懂的Vue源碼系列—01—Vue源碼目錄結構

摘要：閱讀的源碼，或者說閱讀一個框架的源碼，了解它的目錄結構都是很有幫助的。人人都能懂的源碼系列文章將會詳細的介紹源碼的方方面面。閱讀Vue的源碼，或者說閱讀一個框架的源碼，了解它的目錄結構都是很有幫助的。下面我們來看看Vue源碼的目錄結構。showImg(https://segmentfault.com/img/bV8fLS?w=598&h=654); Vue各目錄簡介下圖是Vue各個...

MAX_zuo 2019-08-22 16:14 評論0 收藏0
人人都能懂的Vue源碼系列—08—initLifecycle

摘要：主要是通過為我們屬性添加一些自定義的行為。方法用來初始化一些生命周期相關的屬性，以及為等屬性賦值，來看源碼。名稱說明指定已創(chuàng)建的實例之父實例，在兩者之間建立父子關系。一個對象，持有已注冊過的所有子組件。上篇文章，我們講了vm._renderProxy相關的內容。主要是通過Proxy為我們vm屬性添加一些自定義的行為。今天我們回到init方法中，為大家講解initLifecycle。i...

Cristalven 2019-08-22 17:13 評論0 收藏0
人人都能懂的Vue源碼系列—04—resolveConstructorOptions函數(shù)-下

摘要：上一篇文章中說道，函數(shù)要分兩種情況進行說明，第一種是為基礎構造器的情況，這個已經向大家介紹過了，今天這篇文章主要介紹第二種情況，是創(chuàng)建的子類。表示的是當前構造器上新增的，表示的是當前構造器上新增的封裝。上一篇文章中說道，resolveConstructorOptions函數(shù)要分兩種情況進行說明，第一種是Ctor為基礎構造器的情況，這個已經向大家介紹過了，今天這篇文章主要介紹第二種情況...

My_Oh_My 2019-08-22 16:45 評論0 收藏0
人人都能懂的Vue源碼系列—04—resolveConstructorOptions函數(shù)-下

摘要：上一篇文章中說道，函數(shù)要分兩種情況進行說明，第一種是為基礎構造器的情況，這個已經向大家介紹過了，今天這篇文章主要介紹第二種情況，是創(chuàng)建的子類。表示的是當前構造器上新增的，表示的是當前構造器上新增的封裝。上一篇文章中說道，resolveConstructorOptions函數(shù)要分兩種情況進行說明，第一種是Ctor為基礎構造器的情況，這個已經向大家介紹過了，今天這篇文章主要介紹第二種情況...

BlackHole1 2019-08-26 11:51 評論0 收藏0