说说Vue3中provide、inject的源码和使用技巧使用Vue从父组件传递数据到子组件，一般使用definePro

使用Vue从父组件传递数据到子组件，一般使用defineProps就能满足大部分场景，但如果要跨多层级组件传递数据，则可使用provide和inject。从provide和inject组合字面理解，类似于依赖注入模式，本篇内容将从provide、inject的实现原理来分析使用中的一些技巧。

provide、inject简介

来自官网的介绍：一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

provide组件内提供方式：

import { ref, provide } from 'vue' 
const count = ref(0) 
provide('key', count)

仅需调用provide提供key、value即可，需要注意的是：key建议使用Symbol形式提供，避免冲突；value可为任意类型，也可提供Ref类型，并且子组件使用时不会解构，依然保持响应式。

provide应用层提供方式：

import { createApp } from 'vue' 
const app = createApp({}) 
app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

部分全局配置，例如用户信息，希望在应用层级内所有组件都能获取配置，则可使用app.provide方法注入配置信息。

不管provide是组件内提供还是应用层提供，获取方式都是一样：

const value = inject('message', '这是默认值')

使用inject获取信息时，建议传递第二个参数作为缺省时默认值。

provide、inject使用技巧： provide提供的value虽然可以为响应式类型，但如果需要更新value值，则强烈建议把修改权交给父组件，父组件可在value中提供update方法给子组件，如下demo所示：

const location = ref('North Pole') 
function updateLocation() { 
    location.value = 'South Pole' 
} 
provide('location', { location, updateLocation })

provide、inject源码本身不复杂，再加上上述demo的说明，接下来的源码理解起来就更加轻车熟路。

知因知果

provide源码

provide函数签名：

export function provide<T, K = InjectionKey<T> | string | number>(
  key: K,
  value: K extends InjectionKey<infer V> ? V : T,
): void

不要被这一串TypeScript类型给唬住了，反正提供key、value就行，key可以为Symbol类型，value没限制。其实这个签名存在bug: K可以为一个对象，例如provide({}, { a: 10})，也不会报TypeScript错误，但实际使用时却会有警告：

provide函数体被if、else包裹，先判断currentInstance是否为空，currentInstance为组件实体，provide只有包含在setup中才能生效，否则会给出warn提示。

if (!currentInstance) {
    if (__DEV__) {
      warn(`provide() can only be used inside setup().`)
    }
} else {
    ...
}

正常使用的逻辑包含在else中，先从currentInstance.provides获取provides对象，如果组件注入任何数据，则currentInstance上的provides缺省为父组件的provides。

let provides = currentInstance.provides

const parentProvides =
  currentInstance.parent && currentInstance.parent.provides
if (parentProvides === provides) {
  provides = currentInstance.provides = Object.create(parentProvides)
}
provides[key as string] = value

parentProvides为父组件provides，判断当前组件的provides是否等于父组件的provides，如果相等，则当前组件就得创建自己的provides了，Object.create方法为何意？以parentProvides作为原型(prototype)创建一个新对象，这样不管组件嵌套多少层，通过原型链方式可访问到链路上注入的所有数据。

问题：上文中currentInstance从何而来？这个话题得从东土大唐说到西天取经，这里就咱不介绍，但在外部也可以通过getCurrentInstance()方法一探当前组件的所有上下文。

inject源码

inject函数签名：

export function inject(
  key: InjectionKey<any> | string,
  defaultValue?: unknown,
  treatDefaultAsFactory = false,
):void

需要强调的是，defaultValue可以为function，例如() => value，此时treeDefaultAsFactory需要设置为true。

inject函数的主体代码如下，同样先获取组件intance，currentRenderingInstance代表SSR渲染的组件实体。

  const instance = currentInstance || currentRenderingInstance
  // also support looking up from app-level provides w/ `app.runWithContext()`
  if (instance || currentApp) {
    ...
  } else if (__DEV__) {
    warn(`inject() can only be used inside setup() or functional components.`)
  }

如果instance和currentApp都没有赋值，即表示未在setup下使用inject，此时会提示警告warn信息。currentApp是什么？通过createApp()创建的应用实体，上文有提到可通过app.provide(key, value)形式在应用层级注入配置信息。

接下来看instance或currentApp不为空的情况，这两者同时有且仅有一个不为空。什么情况下currentApp不为空，我们稍后再讨论，假如在组件中使用inject，则instance不为空。

const provides = currentApp
  ? currentApp._context.provides
  : instance
    ? instance.parent == null
      ? instance.vnode.appContext && instance.vnode.appContext.provides
      : instance.parent.provides
    : undefined

instace.parent == null表示当前为root节点，例如App.vue对应的实体，则此时需要通过路径instance.vnode.appContext.provides(也即是应用层级上的provides)获取注入信息。否则，直接获取parent.provides即可。

什么情况下currentApp不为空？需要在非setup场景下获取应用的provides信息时，则需要通过以下方式使用inject：

app.provide('app', 'test')
...
app.runWithContext(() => {
    // 当前的上下文问currentApp
    inject('app')
})

在调用runWithContext时，其内部会将currentApp设置为app实体，以便在回调中使用inject能拿到应用层依赖注入信息。当在setup上下文时，直接调用inject函数就行。

最后一步，根据key从provides获取值, 但如果key不存在怎么办？根据第二个参数获取缺省值, 需要注意的是：如果缺省值为function，则需要执行defaultValue.call(instance.proxy)动态获取值。

if (provides && (key as string | symbol) in provides) {
  // TS doesn't allow symbol as index type
  return provides[key as string]
} else if (arguments.length > 1) {
  return treatDefaultAsFactory && isFunction(defaultValue)
    ? defaultValue.call(instance && instance.proxy)
    : defaultValue
}

使用中的问题和技巧

provide key使用硬编码，导致冲突

例如有这样的组件关系child.vue -> parent.vue->root.vue，如下所示，root和parent组件都定义有key为name的注入，child组件内只能获取到parent中provide，原因是root.vue的相同key被parent.vue覆盖掉。

// root.vue
provide('name', 'root')

// parent.vue
provide('name', 'parent')

// child.vue
inject('name', '')

为了避免key冲突，使用Symbol保证全局唯一性，为每一个key单独定义Smybol，改造如下：

// smybols.ts
const ROOT_NAME_KEY = Symbol('name')
const PARENT_NAME_KEY = Symbol('name')

// root.vue
provide(ROOT_NAME_KEY, 'root')

// parent.vue
provide(PARENT_NAME_KEY, 'parent')

// child.vue
const rootName = inject(ROOT_NAME_KEY, 'root')
const parentName = inject(PARENT_NAME_KEY, 'parent')

inject使用时无TypeScript提示, 使用InjectionKey限制类型

如上文demo中所示，child.vue组件内感知不到parent或root组件具体提供了哪些provide，因此只能通过查阅父组件代码知晓。但在TypeScript代码中，开发者期望在使用inject时能够感知到提供的注入信息。

Vue为我们提供了范型Injection<T>来定义key的类型，例如为应用层级定义类型：

import { InjectionKey } from 'vue'

type AppConfigContext = {
  userId: string;
  userName: string;
  theme: string;
};

export const AppContextKey: InjectionKey<AppConfigContext> = Symbol()

在App.vue中注入时，如果提供的value和AppConfigContext不匹配，则会报ts错误：

组件中使用时，也能感知到具体类型：

总结

通过provide、inject源码分析，了解到可通过getCurrentInstance函数获取当前组件的上下文，其中包含了组件的attrs、data等信息，这为我们在使用Vue过程中提供了更灵活的信息获取方式。

使用中，避免遍地开花式地滥用provide，到后期更本就没人知道到底提供了哪些依赖注入。好的使用方式： 注入时尽量通过Smybol方式定义key，避免冲突。更好的使用方式：通过Vue提供的InjectionKey范型提前定义好需要使用的属性，在child中使用时能感知到提供的具体属性。

我是前端下饭菜，原创不易，各位看官动动手，帮忙关注、点赞、收藏、评轮！