早上好!繼續開始學習Vue原始碼吧~
在 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
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
方法:
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 了。
PS:這裡沒有去程式碼驗證,如有問題,歡迎指出,謝謝!
最後
至此,provide 和 inject 的原始碼學習完畢啦~ 如果有任何問題和建議,歡迎聯絡我!謝謝!
預告:明天學習 Vue 的 VDOM、VNode 相關知識。歡迎繼續關注~
Vue.js學習系列
鑑於前端知識碎片化嚴重,我希望能夠系統化的整理出一套關於Vue的學習系列部落格。
Vue.js學習系列專案地址
本文原始碼已收入到GitHub中,以供參考,當然能留下一個star更好啦^-^。
https://github.com/violetjack/VueStudyDemos
關於作者
VioletJack,高效學習前端工程師,喜歡研究提高效率的方法,也專注於Vue前端相關知識的學習、整理。
歡迎關注、點贊、評論留言~我將持續產出Vue相關優質內容。
新浪微博: http://weibo.com/u/2640909603
掘金:https://gold.xitu.io/user/571…
CSDN: http://blog.csdn.net/violetja…
簡書: http://www.jianshu.com/users/…
Github: https://github.com/violetjack