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函数对此组件的属性和值进行设置获取函数和设置函数。

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