源碼位置

和之前一樣，初始化的方法都是在 Vue 的 _init 方法中的。

  // 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 的初始化方法了。這兩個(gè)方法都是在 src/core/instance/inject.js 中。

provide

provide 選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。在該對(duì)象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環(huán)境下可工作。

先看源碼：

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

provide 是向下傳遞數(shù)據(jù)的選項(xiàng)。這里先拿到 provide 選項(xiàng)中的內(nèi)容，如果有 provide 選項(xiàng)，將 provide 選項(xiàng)傳遞給 vm._provided 變?yōu)?Vue 實(shí)例全局?jǐn)?shù)據(jù)。
這里看一下例子更清楚，下例中傳入數(shù)據(jù) foo，數(shù)據(jù)內(nèi)容為 bar。

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

inject

inject 選項(xiàng)應(yīng)該是一個(gè)字符串?dāng)?shù)組或一個(gè)對(duì)象，該對(duì)象的 key 代表了本地綁定的名稱(chēng)，value 為其 key (字符串或 Symbol) 以在可用的注入中搜索。

源碼

// src/core/instance/inject.jsexport 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
  }
}

簡(jiǎn)化后的源碼可以看到，首先通過(guò) resolveInject 方法獲取 inject 選項(xiàng)搜索結(jié)果，如果有搜索結(jié)果，遍歷搜索結(jié)果并為其中的數(shù)據(jù)添加 setter 和 getter。
接著來(lái)看下 resolveInject 方法：

export function resolveInject (inject: any, vm: Component): ?Object {
  if (inject) {    // inject 是 :any 類(lèi)型因?yàn)榱鳑](méi)有智能到能夠指出緩存
    const result = Object.create(null)    // 獲取 inject 選項(xiàng)的 key 數(shù)組
    const keys = hasSymbol
      ? Reflect.ownKeys(inject).filter(key => {        
        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 選項(xiàng)的 key 數(shù)組，遍歷 key 數(shù)組，通過(guò)向上冒泡來(lái)查找 provide 中是否有 key 與 inject 選項(xiàng)中 from 屬性同名的，如果有，則將這個(gè)數(shù)據(jù)傳遞給 result；如果沒(méi)有，檢查 inject 是否有 default 選項(xiàng)設(shè)定默認(rèn)值或者默認(rèn)方法，如果有則將默認(rèn)值返傳給 result，最終返回 result 對(duì)象。
所以，inject 的寫(xiě)法應(yīng)該是有 default 默認(rèn)值的：

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

或者是有 from 查找鍵和 default 默認(rèn)值的：

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

或者為 default 默認(rèn)值設(shè)定一個(gè)工廠方法：

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

好吧，我承認(rèn)這就是引用的官網(wǎng)的三個(gè)例子~ 不過(guò)意思到就好啦。
這里我有個(gè)疑問(wèn)，既然在源碼中主動(dòng)去識(shí)別了 from 和 default，官網(wǎng)上說(shuō)是

在 2.5.0+ 的注入可以通過(guò)設(shè)置默認(rèn)值使其變成可選項(xiàng)：

那么如下寫(xiě)法還可用嗎？

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

為此，我們?nèi)ゲ椴?2.2.0 版本的Vue是怎么寫(xiě)的？

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
      }
    }
  }
}

從中可以看到，在這個(gè)版本 provide 和 inject 是一起初始化的。之后，將 provide 傳給 vm._provide ，在獲取 inject 選項(xiàng)的時(shí)候代碼判斷了 inject 是否為數(shù)組，如果是數(shù)組直接遍歷數(shù)組，之后查找 provide 的代碼差不多。
所以我推測(cè)： 在 2.5.0+ 之后不能再使用數(shù)組形式的 inject 來(lái)搜索 provide 了。

以上就是Vue.js源碼學(xué)習(xí)provide 和 inject的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！