解释 Vue 3 源码中 `provide` 和 `inject` 机制的底层实现，特别是它们如何在组件树中进行数据的查找和响应式传递。

各位观众老爷们，晚上好！欢迎来到“扒 Vue 3 祖坟”系列讲座。今天咱们要聊的是 Vue 3 中 provide/inject 这对好基友，看看它们是如何穿梭组件树，传递响应式数据，简直比顺丰快递还快！

一、provide/inject：组件树的“星际传送门”

首先，我们得明白 provide/inject 是干嘛的。简单来说，它们提供了一种让祖先组件向后代组件“隔空投送”数据的方法，而无需一层层地 props 传递。这就像在组件树中建立了一个个“星际传送门”，数据可以在特定组件之间直接传送，避免了中间组件的“吃灰”。

举个例子，你有一个根组件 App.vue，它想把用户的 token 信息传递给深层嵌套的子组件 UserProfile.vue。如果用 props 传递，你需要一层层地把 token 传下去，搞不好你都得把组件关系图画出来，不然就迷路了。但有了 provide/inject，你就可以在 App.vue 中 provide 这个 token，然后在 UserProfile.vue 中 inject 它，中间的组件们可以完全不用关心这个 token 的存在，是不是很方便？

二、provide 的实现：祖先组件的“数据仓库”

provide 的作用是让组件提供一些数据，供后代组件使用。在 Vue 3 源码中，provide 的实现其实就是在组件实例上维护一个 provides 对象，这个对象就像一个“数据仓库”，存储了组件要提供的数据。

我们来看一下 provide 的源码实现（简化版，忽略了一些边界情况）：

// packages/runtime-core/src/apiProvide.ts

import { currentInstance } from './component'

export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
  if (!currentInstance) {
    if (__DEV__) {
      warn(`provide() can only be used inside setup().`)
    }
    return
  }

  let provides = currentInstance.provides
  // provides 是原型链继承，如果当前组件是根组件，那么 provides 就是 app 上定义的 provides
  // 否则就是父组件的 provides，这样子组件才能访问到父组件的 provide
  const parentProvides = currentInstance.parent?.provides

  // 如果 currentInstance.provides 和 parentProvides 指向同一个对象，说明当前组件是第一个 provide 的组件
  if (provides === parentProvides) {
    // 通过原型链继承，避免污染父组件的 provides
    provides = currentInstance.provides = Object.create(parentProvides)
  }

  provides[key as string | number] = value
}

这段代码的关键在于 currentInstance.provides。

currentInstance：指向当前组件实例。
currentInstance.provides：指向当前组件实例的 provides 对象。
Object.create(parentProvides)：创建一个以父组件的 provides 对象为原型的新对象。

代码解释：

provide 函数首先检查是否在 setup() 函数中调用。这是因为 provide 只能在组件的 setup() 函数中调用，才能正确获取到组件实例。
获取当前组件实例的 provides 对象。如果 provides 对象和父组件的 provides 对象指向同一个对象，说明当前组件是第一个 provide 数据的组件。
为了避免污染父组件的 provides 对象，创建一个以父组件的 provides 对象为原型的新对象，并赋值给当前组件实例的 provides 对象。
将要提供的数据存储到 provides 对象中，键为 key，值为 value。

重点提示：

provides 对象是通过原型链继承实现的。这意味着子组件可以访问到父组件提供的 provide 数据。
如果子组件也 provide 了相同的 key，那么子组件的 provide 会覆盖父组件的 provide。这就像“就近原则”，子组件优先使用自己提供的 provide 数据。

三、inject 的实现：后代组件的“寻宝之旅”

inject 的作用是在组件中注入祖先组件提供的 provide 数据。在 Vue 3 源码中，inject 的实现就是在组件实例上查找 provides 对象，并根据 key 找到对应的数据。

我们来看一下 inject 的源码实现（简化版，忽略了一些边界情况）：

// packages/runtime-core/src/apiInject.ts

import { currentInstance } from './component'
import { hasOwn } from '@vue/shared'

export function inject<T>(
  key: InjectionKey<T> | string | number,
  defaultValue?: T,
  treatDefaultAsFactory = false
): T | undefined {
  if (!currentInstance) {
    if (__DEV__) {
      warn(`inject() can only be used inside setup().`)
    }
    return
  }

  const provides = currentInstance.parent?.provides

  if (provides && (key as string | number) in provides) {
    // TS 忽略类型检查，因为 provides 的类型是 any
    return provides[key as string | number]
  } else if (arguments.length > 1) {
    // 如果提供了默认值
    if (treatDefaultAsFactory && typeof defaultValue === 'function') {
      return (defaultValue as Function)()
    } else {
      return defaultValue
    }
  } else if (__DEV__) {
    warn(`Injection "${String(key)}" not found`)
  }
}

代码解释：

inject 函数首先检查是否在 setup() 函数中调用。
获取当前组件实例的父组件的 provides 对象。
在 provides 对象中查找 key 对应的数据。如果找到了，直接返回。
如果没有找到，并且提供了默认值，则返回默认值。如果 treatDefaultAsFactory 为 true，并且默认值是一个函数，则调用该函数并返回其结果。
如果没有找到，也没有提供默认值，则在开发环境下发出警告。

重点提示：

inject 是从父组件的 provides 对象开始查找的，然后沿着原型链向上查找，直到找到对应的 key 或到达根组件。
如果多个祖先组件都 provide 了相同的 key，那么 inject 会找到最近的那个 provide。这就像“作用域链”一样，inject 会优先查找最近的 provide。
inject 可以提供默认值。如果祖先组件没有 provide 对应的 key，那么 inject 会返回默认值。这可以避免在没有 provide 的情况下出现错误。

四、响应式传递：provide/inject 的“灵魂”

provide/inject 的强大之处在于它可以传递响应式数据。这意味着当 provide 的数据发生变化时，inject 的数据也会自动更新。这使得 provide/inject 非常适合传递全局状态或配置信息。

那么，provide/inject 是如何实现响应式传递的呢？

其实，provide 的 value 可以是任何类型的数据，包括响应式数据。当 value 是响应式数据时，inject 得到的就是一个响应式引用。这意味着当 value 发生变化时，所有 inject 了该 value 的组件都会自动更新。

我们来看一个例子：

// App.vue
<template>
  <Child />
</template>

<script setup>
import { ref, provide } from 'vue'
import Child from './Child.vue'

const count = ref(0)

provide('count', count)

setInterval(() => {
  count.value++
}, 1000)
</script>

// Child.vue
<template>
  <div>Count: {{ injectedCount }}</div>
</template>

<script setup>
import { inject } from 'vue'

const injectedCount = inject('count')
</script>

在这个例子中，App.vue provide 了一个响应式数据 count，Child.vue inject 了这个 count。当 count 的值发生变化时，Child.vue 中的 injectedCount 也会自动更新。

五、InjectionKey：类型的“守护神”

为了提高代码的可维护性和可读性，Vue 3 引入了 InjectionKey 接口。InjectionKey 是一个 TypeScript 接口，用于定义 provide/inject 的 key 的类型。

我们来看一个例子：

// types.ts
import { InjectionKey, Ref } from 'vue'

export const countKey: InjectionKey<Ref<number>> = Symbol('count')

在这个例子中，我们定义了一个 InjectionKey 类型的常量 countKey，它的类型是 Ref<number>。这意味着 countKey 只能用于 provide 和 inject 类型为 Ref<number> 的数据。

使用 InjectionKey 可以避免类型错误，提高代码的可维护性和可读性。

// App.vue
<script setup lang="ts">
import { ref, provide } from 'vue'
import Child from './Child.vue'
import { countKey } from './types'

const count = ref(0)

provide(countKey, count)
</script>

// Child.vue
<script setup lang="ts">
import { inject } from 'vue'
import { countKey } from './types'

const injectedCount = inject(countKey)
</script>

六、provide/inject 的应用场景：无限可能

provide/inject 的应用场景非常广泛，以下是一些常见的例子：

主题配置： 可以使用 provide/inject 在根组件中 provide 主题配置，然后在后代组件中 inject 主题配置，从而实现全局主题切换。
国际化： 可以使用 provide/inject 在根组件中 provide 国际化配置，然后在后代组件中 inject 国际化配置，从而实现多语言支持。
状态管理： 虽然 Vuex 和 Pinia 更适合大型应用的状态管理，但在小型应用中，可以使用 provide/inject 来实现简单的状态管理。
依赖注入： 可以使用 provide/inject 来实现依赖注入，从而提高代码的可测试性和可维护性。

七、provide/inject 的优缺点：权衡利弊

provide/inject 是一种强大的工具，但它也有一些缺点。在使用 provide/inject 时，需要权衡利弊。

优点：

简化数据传递： 避免了 props 的层层传递，简化了组件之间的通信。
提高代码的可维护性： 将数据提供者和数据消费者解耦，降低了组件之间的依赖性。
实现全局状态管理： 可以方便地实现全局状态管理，例如主题配置、国际化配置等。

缺点：

降低组件的复用性： 如果组件依赖于 inject 的数据，那么它就不能在没有 provide 的环境中使用。
增加代码的复杂性： provide/inject 可能会使代码变得更加复杂，特别是当多个组件都 provide 和 inject 数据时。
类型安全问题： 如果没有使用 InjectionKey，provide/inject 可能会导致类型错误。

八、provide/inject 的最佳实践：驾驭神力

为了更好地使用 provide/inject，以下是一些最佳实践：

使用 InjectionKey： 使用 InjectionKey 可以提高代码的类型安全性和可维护性。
避免过度使用： 不要过度使用 provide/inject，只有在确实需要跨层级传递数据时才使用它。
谨慎使用响应式数据： 响应式数据可能会导致性能问题，特别是当 provide 的数据频繁变化时。
提供默认值： 为 inject 提供默认值可以避免在没有 provide 的情况下出现错误。
注意命名冲突： 避免 provide 的 key 与其他 props 或变量名冲突。

九、总结：provide/inject 的“江湖地位”

provide/inject 是 Vue 3 中一个非常重要的特性，它提供了一种灵活的数据传递方式，可以简化组件之间的通信，提高代码的可维护性。但是，provide/inject 也有一些缺点，需要在使用时权衡利弊。

总而言之，provide/inject 就像一把双刃剑，用好了可以让你在组件树中自由穿梭，传递数据如臂使指；用不好则会让你迷失方向，深陷数据传递的泥潭。

希望通过今天的讲座，大家能够对 provide/inject 的底层实现有更深入的了解，并在实际开发中灵活运用，写出更加优雅、高效的 Vue 3 代码。

今天的讲座就到这里，谢谢大家！下次再见！

发表回复 取消回复

发表回复取消回复