Vue?2源碼閱讀?Provide?Inject?依賴注入詳解
Provide/Inject 初始化
1. initInjections 依賴初始化
該步驟其實發(fā)生在 initState 之前,但是由于 provide/inject 一般是配合使用,所以這里調(diào)整了一下順序。
該函數(shù)的定義與過程都比較簡單:
export function initInjections(vm: Component) {
const result = resolveInject(vm.$options.inject, vm)
if (result) {
toggleObserving(false)
Object.keys(result).forEach(key => {
if (__DEV__) {
defineReactive(vm, key, result[key], () => warn(''))
} else {
defineReactive(vm, key, result[key])
}
})
toggleObserving(true)
}
}
export function resolveInject(inject: any, vm: Component): Record<string, any> | undefined | null {
if (inject) {
const result = Object.create(null)
const keys = hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject)
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
if (key === '__ob__') continue
const provideKey = inject[key].from
if (provideKey in vm._provided) {
result[key] = vm._provided[provideKey]
} else if ('default' in inject[key]) {
const provideDefault = inject[key].default
result[key] = isFunction(provideDefault) ? provideDefault.call(vm) : provideDefault
} else if (__DEV__) {
warn('')
}
}
return result
}
}
- 在 initInjections 函數(shù)中,只是遍歷了 options.inject 配置的依賴數(shù)據(jù),并 關(guān)閉 了依賴數(shù)據(jù)的 響應(yīng)式依賴收集,最后通過 defineReactive 將對應(yīng)的數(shù)據(jù)掛載到實例 vm 上,以便后面能直接訪問。
這就是官方提示的 為什么 provide/inject 的數(shù)據(jù)不是響應(yīng)式的了。
- 而 resolveInject 函數(shù)就是用來對組件的 inject 依賴數(shù)據(jù)進(jìn)行處理,并返回一個沒有多余原型鏈的對象。
在官方文檔中,inject 接收一個字符串?dāng)?shù)組或者一個 key 為 string 的對象,而作為對象時則 必須 有 from 字段來表示依賴數(shù)據(jù)的獲取指向,另外也接收一個 default 屬性作為降級時使用的默認(rèn)值。
但是,在 mergeOptions 之后,會將 options.inject 轉(zhuǎn)為標(biāo)準(zhǔn)對象格式。
并且這里并沒有對注入數(shù)據(jù) provide[key] 進(jìn)行處理,而是直接賦值;所以才有:如果你傳入了一個可監(jiān)聽的對象,那么其對象的 property 還是可響應(yīng)的。
resolveInject() 函數(shù)就是解析標(biāo)準(zhǔn)格式 inject 配置,并將上層組件的 provide 的值或者 default 默認(rèn)值綁定到函數(shù)返回對象中;如果這兩個都沒有,則會提示錯誤信息 “injection xx not found”
2. initProvide 注入數(shù)據(jù)初始化
初始化注入數(shù)據(jù)的過程也很簡單,整個過程其實與 initInjection 類似。其函數(shù)定義如下:
export function initProvide(vm: Component) {
const provideOption = vm.$options.provide
if (provideOption) {
const provided = isFunction(provideOption) ? provideOption.call(vm) : provideOption
if (!isObject(provided)) {
return
}
const source = resolveProvided(vm)
const keys = hasSymbol ? Reflect.ownKeys(provided) : Object.keys(provided)
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
Object.defineProperty(
source,
key,
Object.getOwnPropertyDescriptor(provided, key)!
)
}
}
}
export function resolveProvided(vm: Component): Record<string, any> {
const existing = vm._provided
const parentProvides = vm.$parent && vm.$parent._provided
if (parentProvides === existing) {
return (vm._provided = Object.create(parentProvides))
} else {
return existing
}
}
官方文檔中對 provide 配置項的說明是,可以是一個對象或者一個返回對象的函數(shù)。
- 所以這里首先判斷了 options.provide 的類型并獲取到了結(jié)果,如果結(jié)果 不是對象則會直接退出。
- 然后,則是初始化 provide 的數(shù)據(jù)。
此時會將當(dāng)前實例的 provided 數(shù)據(jù)與父組件實例的 provided 進(jìn)行比較,如果相同,則返回一個 以父組件實例 provided 數(shù)據(jù)為原型創(chuàng)建的對象,否則直接返回當(dāng)前實例的 provided 數(shù)據(jù)。
因為每一個實例都會進(jìn)行與父組件實例的注入數(shù)據(jù)比較,所以才能多層級傳遞
- 最后,則是遍歷 provided 對象,通過 Object.defineProperty 來處理數(shù)據(jù)獲取。
總結(jié)
整個 provide/inject 的初始化過程都很清晰,只是通過少數(shù)校驗和處理,將 provide 數(shù)據(jù)一層一層傳遞下去,直到 inject 依賴時讀該改數(shù)據(jù)的值;
并且因為在初始化時會關(guān)閉響應(yīng)式處理部分,所以 provide/inject 的 直接綁定數(shù)據(jù) 才不支持響應(yīng)式;但
又因為 沒有對數(shù)據(jù)的進(jìn)行深層次處理,所以,原有的響應(yīng)式數(shù)據(jù)才會繼續(xù)觸發(fā)整個響應(yīng)式系統(tǒng)的改變。
以上就是Vue 2源碼閱讀 Provide Inject 依賴注入詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue Provide Inject 依賴注入的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于vue中@click.native.prevent的說明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03
vue源碼解析computed多次訪問會有死循環(huán)原理
這篇文章主要為大家介紹了vue源碼解析computed多次訪問會有死循環(huán)原理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
vue前端頁面數(shù)據(jù)加載添加loading效果的實現(xiàn)
這篇文章主要介紹了vue前端頁面數(shù)據(jù)加載添加loading效果的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07

