Vue.js 源碼學習五 —— provide 和 inject 學習

時間 2019-11-06

標籤 vue.js vue 源碼學習 provide inject 欄目 JavaScript 简体版

原文原文鏈接

早上好！繼續開始學習Vue源碼吧~

在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 選項。他們成對出現，用於父級組件向下傳遞數據。
下面咱們來看看源碼~前端

源碼位置

和以前同樣，初始化的方法都是在 Vue 的 _init 方法中的。git

// src/core/instance/init.js
  Vue.prototype._init = function (options?: Object) {
    ……
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
  }

這裏找到 initInjections 和 initProvide 方法，這就是 provide 和 inject 的初始化方法了。這兩個方法都是在 src/core/instance/inject.js 中。github

provide

provide 選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。在該對象中你可使用 ES2015 Symbols 做爲 key，可是隻在原生支持 Symbol 和 Reflect.ownKeys 的環境下可工做。

先看源碼：數組

// src/core/instance/inject.js
export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

provide 是向下傳遞數據的選項。這裏先拿到 provide 選項中的內容，若是有 provide 選項，將 provide 選項傳遞給 vm._provided 變爲 Vue 實例全局數據。
這裏看一下例子更清楚，下例中傳入數據 foo，數據內容爲 bar。緩存

var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

inject

inject 選項應該是一個字符串數組或一個對象，該對象的 key 表明了本地綁定的名稱，value 爲其 key (字符串或 Symbol) 以在可用的注入中搜索。

源碼前端工程師

// src/core/instance/inject.js
export function initInjections (vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    observerState.shouldConvert = false
    Object.keys(result).forEach(key => {
      defineReactive(vm, key, result[key])
    })
    observerState.shouldConvert = true
  }
}

簡化後的源碼能夠看到，首先經過 resolveInject 方法獲取 inject 選項搜索結果，若是有搜索結果，遍歷搜索結果併爲其中的數據添加 setter 和 getter。
接着來看下 resolveInject 方法：ide

export function resolveInject (inject: any, vm: Component): ?Object {
  if (inject) {
    // inject 是 :any 類型由於流沒有智能到可以指出緩存
    const result = Object.create(null)
    // 獲取 inject 選項的 key 數組
    const keys = hasSymbol
      ? Reflect.ownKeys(inject).filter(key => {
        /* istanbul ignore next */
        return Object.getOwnPropertyDescriptor(inject, key).enumerable
      })
      : Object.keys(inject)

    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      const provideKey = inject[key].from
      let source = vm
      while (source) {
        if (source._provided && provideKey in source._provided) {
          result[key] = source._provided[provideKey]
          break
        }
        source = source.$parent
      }
      if (!source) {
        if ('default' in inject[key]) {
          const provideDefault = inject[key].default
          result[key] = typeof provideDefault === 'function'
            ? provideDefault.call(vm)
            : provideDefault
        } else if (process.env.NODE_ENV !== 'production') {
          warn(`Injection "${key}" not found`, vm)
        }
      }
    }
    return result
  }
}

獲取 inject 選項的 key 數組，遍歷 key 數組，經過向上冒泡來查找 provide 中是否有 key 與 inject 選項中 from 屬性同名的，若是有，則將這個數據傳遞給 result；若是沒有，檢查 inject 是否有 default 選項設定默認值或者默認方法，若是有則將默認值返傳給 result，最終返回 result 對象。
因此，inject 的寫法應該是有 default 默認值的：函數

const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

或者是有 from 查找鍵和 default 默認值的：學習

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

或者爲 default 默認值設定一個工廠方法：this

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

好吧，我認可這就是引用的官網的三個例子~ 不過意思到就好啦。
這裏我有個疑問，既然在源碼中主動去識別了 from 和 default，官網上說是

在 2.5.0+ 的注入能夠經過設置默認值使其變成可選項：

那麼以下寫法還可用嗎？

var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

爲此，咱們去查查 2.2.0 版本的Vue是怎麼寫的？

export function initInjections (vm: Component) {
  const provide = vm.$options.provide
  const inject: any = vm.$options.inject
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
  if (inject) {
    // inject is :any because flow is not smart enough to figure out cached
    // isArray here
    const isArray = Array.isArray(inject)
    const keys = isArray
      ? inject
      : hasSymbol
        ? Reflect.ownKeys(inject)
        : Object.keys(inject)

    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      const provideKey = isArray ? key : inject[key]
      let source = vm
      while (source) {
        if (source._provided && source._provided[provideKey]) {
          vm[key] = source._provided[provideKey]
          break
        }
        source = source.$parent
      }
    }
  }
}

從中能夠看到，在這個版本 provide 和 inject 是一塊兒初始化的。以後，將 provide 傳給 vm._provide ，在獲取 inject 選項的時候代碼判斷了 inject 是否爲數組，若是是數組直接遍歷數組，以後查找 provide 的代碼差很少。
因此我推測： 在 2.5.0+ 以後不能再使用數組形式的 inject 來搜索 provide 了。
PS：這裏沒有去代碼驗證，若有問題，歡迎指出，謝謝！