Vue 初始化 过程中 ，initInjections为什么在initProvide之前？

  • Z时代
  • 2024-02-08
  • 分类：IT

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呢？

回答：

这是当前组件的顺序，你试想下组件层级：
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关联，所以最终就成了源码的样子。
【以上是个人猜测分析，若有错误请指正】

以上是 Vue 初始化 过程中 ，initInjections为什么在initProvide之前？ 的全部内容， 来源链接： utcz.com/p/936413.html

回到顶部