Vue 中的依赖注入

简述

当我们习惯使用组件来实现页面功能的时候，我们会很清晰的把组件尽可能分离成原子颗粒，这样在后期的维护和升级中就可以快速开发迭代。但在组件开发模式中，会遇到这样一个常见的问题，当我们一个页面会有很多组件，并且组件嵌套较多的情况下，实现数据的传输或者共享就会变得比较复杂，一种比较直接的实现方式就是从 root 也就是根节点逐层传递到的相应的子节点，但 Vue3 的依赖注入则可以快速帮我们实现该数据传递和分享。下面我们来简单介绍一下 Vue 依赖注入的使用方式。

Provide

在 Vue3 中的选项式 API 中，我们可以使用 provide 来实现数据的提供，换而言之，我们在数据的提供方代码模块出，提供需要传递的数据。比如我们在 Parent 模块中，需要提供一个message 变量，而且更为方便的是，我们可以直接提供 ref 数据。

#Parent.vue
<script setup>
import { ref, provide } from 'vue'

const message = ref('hello world')

provide('message', message) // provide的第一个参数为变量名，第二个参数为需要提供的变量
</script>

<template>
....
</template>

Inject

接下来，在 children 组件中，我们可以通过 inject 快速获得。

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

const message = inject('message')
</script>

<template>
	<div>
		{{message}}
	</div>
</template>

注意的是，我们在 Parent 组件中传入的 ref不是解包的，这样会保留响应式。

以上，就是我们快速使用 Vue 的依赖注入，实现数据的逐层传递，这样大大提升了我们的开发效率。