关于provide的实现

来源:5-4 使用provide跨层级传递信息以及provide源码解析

godlanbo

2021-01-25

export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
  if (!currentInstance) {
    if (__DEV__) {
      warn(`provide() can only be used inside setup().`)
    }
  } else {
	// 这里如果是第一个组件,拿到的是什么呢?
    let provides = currentInstance.provides
    const parentProvides =
      currentInstance.parent && currentInstance.parent.provides
    if (parentProvides === provides) {
      provides = currentInstance.provides = Object.create(parentProvides)
    }
    // 这里没有任何挂载操作,也就是说组件已经初始化了一个provides对象,只是在调用的时候往上面添加新的值
    provides[key as string] = value
  }
}

关于provide的实现有些疑惑,这里是首先拿到自己的provides,然后拿到父组件的provides,然后判断相等来判断是否继承,那第一个创建的组件拿到自己的provides是什么呢?
而且这里没有对currentInstance上有挂载操作,我没有看过组件初始化相关的源码,我是否可以猜测组件在初始化的时候进行了一定的挂载provides的操作,而且默认挂载的是父组件的provides,否则新创建的组件永远走不到parentProvides等于provides的逻辑里。
对于组件初始化时对provides做的工作想请教一下了老师。

写回答

1回答

Jokcy

2021-01-26

默认所有组件的provides都是从父组件上继承的,也就是从根节点开始的同一个对象,只有你的当前组件调用了provide,才会从父组件的基础上`Object.create`一份,也就是你提供的这部分逻辑

0
2
Jokcy
回复
godlanbo
不是,vue会在跟节点上创建provides,跟节点也没有parent,也获取不到parentProvides
2021-01-28
共2条回复

Vue3.0+TS打造企业级组件库 前端中高级开发者必修课

深度匹配高级前端工程师用人需求 打造属于你自己的开源项目

1310 学习 · 250 问题

查看课程