Vue 初始化 过程中 ,initInjections为什么在initProvide之前?

new Vue过程中,
init 函数 的初始化顺序是

  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props

initInjections initProvide 函数定义 :

export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

export function initInjections (vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    toggleObserving(false)
    Object.keys(result).forEach(key => {
      /* istanbul ignore else */
      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])
      }
    })
    toggleObserving(true)
  }
}

initInjections 函数的作用是 :遍历inject的key从父/祖父组件中把provide的值捕捉下来

initProvide()就是将当前实例的provide的对象赋值vm._provided

这里既然initInjections 是从父/祖父捕捉provide值,为什么不先执行initProvide呢?

阅读 2k
1 个回答

这是当前组件的顺序,你试想下组件层级:
App->Parent->Child
因为App是根,所以不存在inject,那就执行了provider,然后执行Parent的initInject再执行Parent的initProvider,最后再到Child的initInject,Child最后一级不存在向下provider。
所以:这里的initProvider是为了向下提供,而initInject是为了向上获取,但话又说回来,其实这里换顺序也没什么问题,因为这里是同步执行,哪个在前似乎没影响,我觉得重点是注释里所说的resolve injections/provider before/after data/props,因为inject能够在prop中访问使用,所以inject要在initstate之前,而provid可以是函数,为了便于访问data/prop需要在initState之后,虽然顺序无关但跟state关联,所以最终就成了源码的样子。
【以上是个人猜测分析,若有错误请指正】

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题