Vue.js源碼學習provide和inject

來源：懂視網責編：小采時間：2020-11-27 20:03:20

Vue.js源碼學習provide和inject

Vue.js源碼學習provide和inject:在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 選項。他們成對出現，用于父級組件向下傳遞數據。源碼位置和之前一樣，初始化的方法都是在 Vue 的 _init 方法中的。 // src/core/instance/init.js Vue.prototype._in

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue.js源碼學習provide和inject:在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 選項。他們成對出現，用于父級組件向下傳遞數據。源碼位置和之前一樣，初始化的方法都是在 Vue 的 _init 方法中的。 // src/core/instance/init.js Vue.prototype._in

先看源碼：

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

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 了。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue.js源碼學習provide和inject

推薦度：

點擊下載本文 文檔為doc格式

標簽：學習 VUE js

熱門焦點

Vue.js源碼學習provide和inject

Vue.js源碼學習provide和inject

inject

Vue.js源碼學習provide和inject

最新推薦

猜你喜歡

熱門推薦