Vue實例初始化為渲染函數設置檢查源碼剖析

更新時間：2022年08月22日 16:08:51 作者：林語琛

這篇文章主要為大家介紹了Vue實例初始化為渲染函數設置檢查源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

之前的文章提到，Vue實例化時_init方法做了很多處理，其中就有這么一段：

if (__DEV__) {
  initProxy(vm)
} else {
  vm._renderProxy = vm
}

在生產模式下，_renderProxy直接指向了Vue實例本身，而在開發(fā)環(huán)境下調用了initProxy方法，那么它究竟是做什么的呢？

_renderProxy是干什么的

通過對_renderProxy進行全局搜索，我們在src\core\instance\render.ts文件中找到了它：

// 源碼文件 src\core\instance\render.ts
vnode = render.call(vm._renderProxy, vm.$createElement)

也就是說，_renderProxy是渲染函數render的執(zhí)行上下文，在生產環(huán)境下，執(zhí)行上下文就是實例本身，而在開發(fā)環(huán)境下，執(zhí)行上下文則使用initProxy進行了處理，我們接下來看看它究竟做了什么。

initProxy方法

首先判斷了當前環(huán)境下Proxy對象是否存在進行了判斷：

//源碼文件 src\core\instance\proxy.ts
const hasProxy = typeof Proxy !== 'undefined' && isNative(Proxy)
//...
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
  }
}

如果Proxy對象不存在，就放棄治療，上下文仍為原Vue實例。

而如果Proxy對象存在，則進一步去$options里獲取_withStripped屬性，如果_withStripped存在，則使用getHandler方法來代理Vue實例，如果不存在，就使用hasHandler來代理實例。

關于Proxy對象的用法，我在這篇文章里提過，簡單來說，它可以為一個對象設定代理，用以攔截對象的各種方法。

那么，我們進一步看一下,hasHandler和getHandler都做了什么，首先是比較簡單的getHandler:

// 源碼文件：src\core\instance\proxy.ts
const getHandler = {
  get(target, key) {
    if (typeof key === 'string' && !(key in target)) {
      if (key in target.$data) warnReservedPrefix(target, key)
      else warnNonPresent(target, key)
    }
    return target[key]
  }
}

這個方法攔截了Vue實例對象的getter，也就是說，當獲取實例的屬性時，就會觸發(fā)這個方法，在這個方法中，對屬性值是否在實例中以及是否在實例的$data中進行了檢查，如果不存在則發(fā)出相應的警告：

// 源碼文件：src\core\instance\proxy.ts
const warnReservedPrefix = (target, key) => {
  warn(
    `Property "${key}" must be accessed with "$data.${key}" because ` +
      'properties starting with "$" or "_" are not proxied in the Vue instance to ' +
      'prevent conflicts with Vue internals. ' +
      'See: https://v2.vuejs.org/v2/api/#data',
    target
  )
}
const warnNonPresent = (target, key) => {
  warn(
    `Property or method "${key}" is not defined on the instance but ` +
      'referenced during render. Make sure that this property is reactive, ' +
      'either in the data option, or for class-based components, by ' +
      'initializing the property. ' +
      'See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.',
    target
  )
}

而hasHandler則是對實例對象的in操作符進行攔截，也就是攔截以下操作：

屬性查詢：foo in proxy
繼承屬性查詢：foo in Object.create(proxy)
with 檢查: with(proxy) { (foo); }
Reflect.has()

那么做了什么呢：

// 源碼文件：src\core\instance\proxy.ts
const hasHandler = {
  has(target, key) {
    const has = key in target
    const isAllowed =
      allowedGlobals(key) ||
      (typeof key === 'string' &&
        key.charAt(0) === '_' &&
        !(key in target.$data))
    if (!has && !isAllowed) {
      if (key in target.$data) warnReservedPrefix(target, key)
      else warnNonPresent(target, key)
    }
    return has || !isAllowed
  }
}

類似的，依然是對屬性是否在實例中存在進行了檢查，但是多了一步判斷，也就是allowedGlobals，它實際上是一個全局方法列表，當模板中出現了里面的方法名后，不會進行下一個步驟的判斷，也就不會因為在Vue實例和$options中找不到這個名字的屬性而彈出報錯，這些方法你在開發(fā)過程中肯定都用過：

// 源碼文件：src\core\instance\proxy.ts
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,BigInt,' +
    'require' // for Webpack/Browserify
)

總結

Vue實例化過程中，在開發(fā)環(huán)境下會調用initProxy方法來包裝render函數原本的執(zhí)行上下文（也就是Vue實例本身），在它的getter和in操作符中加入一部分屬性的檢查，當模板中調用的屬性不存在于實例中或不存在于$options中時，及時提出警告。

以上就是Vue實例初始化為渲染函數設置檢查源碼剖析的詳細內容，更多關于Vue實例初始化渲染函數檢查的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: