Vue?2源碼閱讀?Provide?Inject?依賴(lài)注入詳解
Provide/Inject 初始化
1. initInjections 依賴(lài)初始化
該步驟其實(shí)發(fā)生在 initState 之前,但是由于 provide/inject 一般是配合使用,所以這里調(diào)整了一下順序。
該函數(shù)的定義與過(guò)程都比較簡(jiǎn)單:
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 配置的依賴(lài)數(shù)據(jù),并 關(guān)閉 了依賴(lài)數(shù)據(jù)的 響應(yīng)式依賴(lài)收集,最后通過(guò) defineReactive 將對(duì)應(yīng)的數(shù)據(jù)掛載到實(shí)例 vm 上,以便后面能直接訪問(wèn)。
這就是官方提示的 為什么 provide/inject 的數(shù)據(jù)不是響應(yīng)式的了。
- 而 resolveInject 函數(shù)就是用來(lái)對(duì)組件的 inject 依賴(lài)數(shù)據(jù)進(jìn)行處理,并返回一個(gè)沒(méi)有多余原型鏈的對(duì)象。
在官方文檔中,inject 接收一個(gè)字符串?dāng)?shù)組或者一個(gè) key 為 string 的對(duì)象,而作為對(duì)象時(shí)則 必須 有 from 字段來(lái)表示依賴(lài)數(shù)據(jù)的獲取指向,另外也接收一個(gè) default 屬性作為降級(jí)時(shí)使用的默認(rèn)值。
但是,在 mergeOptions 之后,會(huì)將 options.inject 轉(zhuǎn)為標(biāo)準(zhǔn)對(duì)象格式。
并且這里并沒(méi)有對(duì)注入數(shù)據(jù) provide[key] 進(jìn)行處理,而是直接賦值;所以才有:如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象,那么其對(duì)象的 property 還是可響應(yīng)的。
resolveInject() 函數(shù)就是解析標(biāo)準(zhǔn)格式 inject 配置,并將上層組件的 provide 的值或者 default 默認(rèn)值綁定到函數(shù)返回對(duì)象中;如果這兩個(gè)都沒(méi)有,則會(huì)提示錯(cuò)誤信息 “injection xx not found”
2. initProvide 注入數(shù)據(jù)初始化
初始化注入數(shù)據(jù)的過(guò)程也很簡(jiǎn)單,整個(gè)過(guò)程其實(shí)與 initInjection 類(lèi)似。其函數(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 } }
官方文檔中對(duì) provide 配置項(xiàng)的說(shuō)明是,可以是一個(gè)對(duì)象或者一個(gè)返回對(duì)象的函數(shù)。
- 所以這里首先判斷了 options.provide 的類(lèi)型并獲取到了結(jié)果,如果結(jié)果 不是對(duì)象則會(huì)直接退出。
- 然后,則是初始化 provide 的數(shù)據(jù)。
此時(shí)會(huì)將當(dāng)前實(shí)例的 provided 數(shù)據(jù)與父組件實(shí)例的 provided 進(jìn)行比較,如果相同,則返回一個(gè) 以父組件實(shí)例 provided 數(shù)據(jù)為原型創(chuàng)建的對(duì)象,否則直接返回當(dāng)前實(shí)例的 provided 數(shù)據(jù)。
因?yàn)槊恳粋€(gè)實(shí)例都會(huì)進(jìn)行與父組件實(shí)例的注入數(shù)據(jù)比較,所以才能多層級(jí)傳遞
- 最后,則是遍歷 provided 對(duì)象,通過(guò) Object.defineProperty 來(lái)處理數(shù)據(jù)獲取。
總結(jié)
整個(gè) provide/inject 的初始化過(guò)程都很清晰,只是通過(guò)少數(shù)校驗(yàn)和處理,將 provide 數(shù)據(jù)一層一層傳遞下去,直到 inject 依賴(lài)時(shí)讀該改數(shù)據(jù)的值;
并且因?yàn)樵诔跏蓟瘯r(shí)會(huì)關(guān)閉響應(yīng)式處理部分,所以 provide/inject 的 直接綁定數(shù)據(jù) 才不支持響應(yīng)式;但
又因?yàn)?沒(méi)有對(duì)數(shù)據(jù)的進(jìn)行深層次處理,所以,原有的響應(yīng)式數(shù)據(jù)才會(huì)繼續(xù)觸發(fā)整個(gè)響應(yīng)式系統(tǒng)的改變。
以上就是Vue 2源碼閱讀 Provide Inject 依賴(lài)注入詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue Provide Inject 依賴(lài)注入的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- Vue 使用依賴(lài)注入的方式共享數(shù)據(jù)的過(guò)程
- Vue3中依賴(lài)注入provide、inject的使用
- Vue3學(xué)習(xí)筆記之依賴(lài)注入Provide/Inject
- vue中的依賴(lài)注入provide和inject簡(jiǎn)單介紹
- Vue?privide?和inject?依賴(lài)注入的使用詳解
- Vue 2.0 中依賴(lài)注入 provide/inject組合實(shí)戰(zhàn)
- 詳解Vue實(shí)戰(zhàn)指南之依賴(lài)注入(provide/inject)
- vue3+ts 依賴(lài)注入provide inject的用法
相關(guān)文章
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)潔版的Mini-Vue框架,應(yīng)該包含三個(gè)模塊:分別是:渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫(kù)模塊,本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn),需要的可以參考一下2023-07-07vue開(kāi)發(fā)頁(yè)面自適應(yīng)屏幕尺寸的實(shí)例代碼
使用vue開(kāi)發(fā)的頁(yè)面都是通過(guò)px設(shè)置它的尺寸,如果換了一個(gè)不同尺寸的屏幕就會(huì)出現(xiàn)頁(yè)面排版錯(cuò)亂,顯示不完整等情況,下面通過(guò)插件將px裝換為rem單位適應(yīng)不同尺寸的屏幕,需要的朋友可以參考下2022-12-12Vue 開(kāi)發(fā)必須知道的36個(gè)技巧(小結(jié))
這篇文章主要介紹了Vue 開(kāi)發(fā)必須知道的36個(gè)技巧(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10關(guān)于vue中@click.native.prevent的說(shuō)明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue源碼解析computed多次訪問(wèn)會(huì)有死循環(huán)原理
這篇文章主要為大家介紹了vue源碼解析computed多次訪問(wèn)會(huì)有死循環(huán)原理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04vue前端頁(yè)面數(shù)據(jù)加載添加loading效果的實(shí)現(xiàn)
這篇文章主要介紹了vue前端頁(yè)面數(shù)據(jù)加載添加loading效果的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07