前言
前面我們簡單的了解了 vue 初始化時的一些大概的流程，這里我們詳細的了解下具體的內容;
內容
這一塊主要圍繞init.ts中的initInjections進行剖析，初始化生命周期之后緊接著，
initInjections
initInjections的方法位于scr/core/instance/inject.ts中；
export function initInjections(vm: Component) {
// 決議inject，回傳決議后的物件
const result = resolveInject(vm.$options.inject, vm)
if (result) {
// 這里是為了告訴defineReactive不需要轉為為回應式資料
// 這里也正好印證了官方檔案中provide 和 inject 系結并不是可回應的，這是刻意為之的
toggleObserving(false)
Object.keys(result).forEach(key => {
/* istanbul ignore else */
if (__DEV__) {
defineReactive(vm, key, result[key], () => {
warn(
`Avoid mutating an injected value directly since the changes will be ` +
`overwritten whenever the provided component re-renders. ` +
`injection being mutated: "${key}"`,
vm
)
})
} else {
defineReactive(vm, key, result[key])
}
})
toggleObserving(true)
}
}
export function resolveInject(
inject: any,
vm: Component
): Record<string, any> | undefined | null {
if (inject) {
// inject is :any because flow is not smart enough to figure out cached
// inject 是 any型別 因為flow不夠智能無法計算快取
// 創建一個空物件用來存放結果
const result = Object.create(null)
// 獲取key名
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
// 如果支持symbol和Reflect就使用 Reflect.ownKeys來獲取所有key，否則使用Object.keys
const keys = hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject)
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
// #6574 in case the inject object is observed...
// 如果是observed就跳過繼續
if (key === '__ob__') continue
const provideKey = inject[key].from
if (provideKey in vm._provided) {
// 向父級_provided屬性遍歷查找屬性值
// 因為父級組件使用provide選項注入資料時會將注入的資料存入自身實體的_provided屬性上
result[key] = vm._provided[provideKey]
} else if ('default' in inject[key]) {
// 當前的資料key存在默認值即default屬性
// 需要對非原始值使用一個工廠方法可結合官方檔案demo查看
const provideDefault = inject[key].default
result[key] = isFunction(provideDefault)
? provideDefault.call(vm)
: provideDefault
} else if (__DEV__) {
warn(`Injection "${key as string}" not found`, vm)
}
}
return result
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547964.html
標籤：其他
上一篇：記錄--你還在傻傻的npm run serve嗎？快來嘗嘗這個！
下一篇：分享我通過 API 賺錢的思路