在 Vue.js 的 2.2.0+ 版本中新增新增了 provide 和 inject 選項。他們成對出現，用於父級組件向下傳遞資料。
和之前一樣，初始化的方法都是在 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 的初始化方法了。這兩個方法都是在 src/core/instance/inject.js 中。
provide 選項應該是一個物件或傳回一個物件的函數。該物件包含可注入其子孫的屬性。在該物件中你可以使用 ES2015 Symbols 作為 key，但只在原生支援 Symbol 和 Reflect.ownKeys 的環境下可運作。
先看原始碼：
// 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 是向下傳遞資料的選項。這裡先拿到 provide 選項中的內容，如果有 provide 選項，將 provide 選項傳遞給 vm._provided 變成 Vue 實例全域資料。
這裡看一下例子比較清楚，下例中傳入資料 foo，資料內容為 bar。
var Provider = {
provide: {
foo: 'bar'
}, // ...}inject 選項應該是字串陣列或對象，該物件的key 代表了本地綁定的名稱，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
}
}簡化後的原始碼可以看到，首先透過resolveInject 方法取得inject 選項搜尋結果，如果有搜尋結果，遍歷搜尋結果並為其中的數據添加setter 和getter。
接著來看下resolveInject 方法：
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 預設值設定一個工廠方法：
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 了。
以上是Vue.js原始碼學習provide 和 inject的詳細內容。更多資訊請關注PHP中文網其他相關文章！
