Vue 的依赖注入（Dependency Injection，简称 DI）是一种设计模式，用于将组件之间的依赖关系解耦。在 Vue 中，依赖注入是通过 provide 和 inject 这两个 API 实现的。

通过 provide API，我们可以在组件的祖先组件中注册一个依赖对象，该对象可以是一个 JavaScript 对象、一个函数或一个 Vue 实例。这个依赖对象会被传递给该组件的所有子孙组件，并可以通过 inject API 在子孙组件中获取到。通过这种方式，我们可以在组件树中任意一个地方定义一个依赖对象，然后在需要使用这个对象的组件中直接获取它，而不用一层层地传递参数。

依赖注入在 Vue 中的应用场景非常广泛，例如在多层级嵌套的组件中，我们可以使用依赖注入传递一些共用的数据或方法，从而避免了通过 props 属性一层层地传递数据的麻烦。在某些场景下，依赖注入也可以用来替代 Vuex 状态管理库，从而简化应用的状态管理逻辑。

// 祖先组件中注册一个依赖对象
const UserContext = {
  username: 'Guest',
  isLoggedIn: false,
  login() {
    // 实现登录逻辑
  },
  logout() {
    // 实现退出登录逻辑
  }
};

export default {
  provide: {
    userContext: UserContext
  }
};
复制

在上面的代码中，我们在祖先组件中注册了一个名为 UserContext 的依赖对象，并通过 provide API 将它传递给了该组件的所有子孙组件。

现在，我们可以在任何一个子孙组件中通过 inject API 来获取这个依赖对象：

export default {
  inject: ['userContext'],
  created() {
    console.log(this.userContext.username); // 输出 'Guest'
    console.log(this.userContext.isLoggedIn); // 输出 false
    this.userContext.login(); // 调用 login 方法
  }
};
复制

在上面的代码中，我们在子孙组件中通过 inject API 注入了 UserContext 对象，并在 created 生命周期钩子函数中使用它。注意，当我们使用 inject API 时，需要将依赖对象的名称作为数组传递给 inject，否则 Vue 会自动将依赖对象的名称转换为驼峰式命名，这可能会导致问题。