Vue 的依赖注入-JavaScript中文网-JavaScript教程资源分享门户

什么是依赖注入？

简单来说，依赖注入是一种将依赖关系从高层模块中解耦出来的编程技术。举例来说，如果 A 模块依赖于 B 模块，我们通常会在 A 模块中直接实例化 B 模块的对象来进行调用。而在依赖注入中，我们会把 B 模块的对象传进 A 模块中，让 A 模块不再直接依赖于 B 模块的实现。

在前端开发中，经常需要通过组件化来构建复杂的应用。这时候，组件之间也存在依赖关系。Vue 借鉴了 Angular 的依赖注入机制，通过提供依赖注入 API 来处理组件之间的依赖关系。

Vue 的依赖注入 API

Vue 提供了两种方式实现依赖注入：provide/inject 和 inject。

provide/inject

Vue 2.2.0+ 版本新增了 provide/inject API。provide 可以在上层组件提供一个变量或方法，inject 可以在子组件中注入这个变量或方法。这个变量或方法可以是任意类型，包括基本数据类型、对象、函数等。

下面是一个例子：

// javascriptcn.com 代码示例
// 父组件中提供变量
provide: {
  username: 'john'
}

// 子组件中注入变量
inject: ['username'],
mounted() {
  console.log(this.username) // john
}

我们可以看到，在父组件中通过 provide 定义了一个 username 变量，并把它传递给子组件。在子组件中，我们通过 inject 注入了这个变量，并在 mounted 钩子中打印了它的值。

需要注意的是，provide/inject 并不是响应式的，也就是说如果 provide 中的变量发生了变化，子组件并不会重新渲染。如果需要实现响应式，可以借助 Vue 的响应式系统来实现。

inject

Vue 2.2.0 之前的版本可以通过 inject 来实现依赖注入。这种方式和 provide/inject 的区别在于，provide/inject 可以在父组件中任意定义变量，子组件可以选择注入哪些变量；而 inject 只能在父组件中预先定义好注入哪些变量，子组件不能选择。

下面是一个例子：

// 父组件中定义要注入的变量
inject: ['username'],

// 子组件中可以直接使用注入的变量
mounted() {
  console.log(this.username) // john
}

依赖注入的优点

使用依赖注入可以将组件之间的依赖关系解耦，并提高组件的可重用性和可维护性。当我们需要对组件进行重构时，只需要修改上层组件传递给下层组件的变量或方法即可，而不用修改下层组件的实现。

另外，依赖注入还可以帮助我们进行单元测试。在进行单元测试时，我们可以通过依赖注入来模拟依赖的对象，并注入到要测试的组件中。

总结

Vue 的依赖注入 API 可以帮助我们更好地处理组件之间的依赖关系。provide/inject 可以让父组件提供任意类型的变量并注入子组件，inject 可以让父组件预定义好注入哪些变量并直接在子组件中使用。依赖注入的优点在于解耦组件之间的依赖关系，提高组件的可重用性和可维护性，并帮助进行单元测试等。在实际开发中，我们可以灵活使用依赖注入，提高代码的质量和效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653695467d4982a6ebeaf117