深入剖析Vue3 RunTimeCore——apiInject源码，为您解开provide / inject的奥秘

2024-01-07 09:46:45

前言

在现代前端开发中，依赖注入（Dependency Injection）已成为一种广泛采用的设计模式。它允许我们在运行时向组件提供其所需的数据和依赖项，而无需在组件内部显式地实例化和管理这些依赖项。这不仅提高了代码的可测试性和可维护性，还使得组件之间更加松散耦合，便于重用和扩展。

在Vue3中，依赖注入的实现主要依赖于两个关键API：provide和inject。provide API允许父组件向其子组件提供数据和依赖项，而inject API则允许子组件从父组件或祖先组件中获取这些数据和依赖项。

provide / inject的使用方法

要使用provide / inject，您需要在父组件中使用provide方法来提供数据或依赖项，并在子组件中使用inject方法来获取这些数据或依赖项。

在父组件中使用provide

在父组件中，您可以通过调用provide方法来提供数据或依赖项。provide方法接受两个参数：

key：一个字符串或Symbol，用作数据或依赖项的标识符。
value：要提供的实际数据或依赖项。

例如，以下代码在父组件中提供了名为"message"的数据：

export default {
  provide() {
    return {
      message: 'Hello, Vue3!'
    }
  }
}

在子组件中使用inject

在子组件中，您可以通过调用inject方法来获取父组件或祖先组件提供的依赖项。inject方法接受一个参数：

key：要获取的依赖项的标识符。

例如，以下代码在子组件中获取了父组件提供的"message"数据：

export default {
  inject: ['message'],
  render() {
    return <div>{ this.message }</div>
  }
}

provide / inject的实现原理

provide / inject的实现原理相对简单。在父组件中调用provide方法时，Vue3会将提供的键值对存储在当前组件的provide对象中。当子组件调用inject方法时，Vue3会首先在当前组件的provide对象中查找对应的键值对。如果找到，则直接返回该键值对的值。如果找不到，则Vue3会继续在父组件的provide对象中查找，直到找到相应的键值对。

如果在所有祖先组件的provide对象中都没有找到相应的键值对，则Vue3会抛出一个错误。这通常意味着您在子组件中使用了错误的键来获取依赖项。