概述

provide和inject是Vue3中新增的两个 API，用于实现组件间的通信，这种特性可以使得父组件向其所有子组件提供依赖项，而不需要通过props属性一层层传递。 如果provide提供的值是响应式的，如reactive或者ref创建的，那么injecct注入对应的 key，获取的值也将是响应式的，反之亦然。

源码分析

provide

provide 可以提供任何类型的数据，包括基本类型、对象、函数、响应式对象等。

function provide(key, value) {
  if (!currentInstance);
  else {
    let provides = currentInstance.provides;
    const parentProvides =
      currentInstance.parent && currentInstance.parent.provides;
    if (parentProvides === provides) {
      provides = currentInstance.provides = Object.create(parentProvides); //保证父子组件的provides是独立的
    }
    provides[key] = value;
  }
}

inject

inject 可以注入提供的任何类型的值，并且能够响应式地追踪注入的响应式对象或 ref。

function inject(key, defaultValue, treatDefaultAsFactory = false) {
  const instance = currentInstance || currentRenderingInstance;
  if (instance || currentApp) {
    const provides = instance
      ? instance.parent == null
        ? instance.vnode.appContext && instance.vnode.appContext.provides
        : instance.parent.provides
      : currentApp._context.provides;
    if (provides && key in provides) {
      return provides[key];
    } else if (arguments.length > 1) {
      return treatDefaultAsFactory && shared.isFunction(defaultValue)
        ? defaultValue.call(instance && instance.proxy)
        : defaultValue;
    } else;
  }
}