Vue源代碼閱讀之7初始化注入

講initInjections之前首先是需要對大家進行講解inject和provide這兩個屬性,這兩個屬性一般不建議在普通的應用程序中使用,在高等級的組件中使用用於父組件向子組件傳遞數據。祖先組件在provide中提供後代可使用的數據,後代組件在inject中設置使用祖先組件的屬性名。

export function initInjections (vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    observerState.shouldConvert = false
    Object.keys(result).forEach(key => {
      if (process.env.NODE_ENV !== 'production') {
        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])
      }
    })
    observerState.shouldConvert = true
  }
}

首先調用函數resolveInject獲取子組件要獲取的數據名稱,並在其祖先組件中的_provide中尋找具有此屬性名稱的內容如果有使用此屬性值作爲此屬性的參數值,如果沒有找到根據最子組件的此屬性名中是否有default如果有使用這個值作爲此屬性的參數值如果沒有則進行警告。

然後根據子組件是否在祖先組件中找到inject中需要的屬性的值,如果沒有退出,如果有遍歷所有有效的inject屬性調用defineReactive函數對此組件的屬性和值進行設置獲取函數和設置函數。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章