面试题：Vue 3 Composition API 下的依赖注入与代码组织优化

1. 使用 provide 和 inject 进行依赖注入的方式

在 Vue 3 的 Composition API 中，provide 用于在父组件中提供数据或方法，inject 用于在子组件中注入这些数据或方法。

例如，假设我们有一个多层级的组件结构，在顶层组件 App.vue 中：

<template>
  <div id="app">
    <Child1 />
  </div>
</template>

<script setup>
import { provide } from 'vue';
import Child1 from './components/Child1.vue';

const globalData = 'This is global data';
provide('globalData', globalData);
</script>

在深层子组件 Child1.vue 中：

<template>
  <div>
    <p>{{ injectedData }}</p>
  </div>
</template>

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

const injectedData = inject('globalData');
</script>

2. 相较于传统父子组件传参的优势

简化多层级传参：在传统父子组件传参中，如果有一个深层嵌套的组件需要父组件的数据，数据需要层层传递，这会导致中间层级的组件需要接收并传递一些它们并不需要的数据，增加了代码的冗余和复杂性。而 provide 和 inject 可以直接跨越中间层级，将数据注入到需要的组件中。
提高代码的可维护性：当共享数据发生变化时，只需要在 provide 的地方修改，依赖该数据的所有组件都会自动更新，无需在每个传递数据的层级都进行修改。
便于复用：多个不相关的组件可以方便地注入相同的数据或方法，提高了代码的复用性。

3. 可能遇到的问题及解决方案

数据响应式问题：如果 provide 的数据不是响应式的，那么当数据变化时，注入该数据的组件不会自动更新。
- 解决方案：使用 ref 或 reactive 创建响应式数据进行 provide。例如：

<template>
  <div id="app">
    <Child1 />
    <button @click="updateGlobalData">Update Data</button>
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import Child1 from './components/Child1.vue';

const globalData = ref('This is global data');
provide('globalData', globalData);

const updateGlobalData = () => {
  globalData.value = 'Data has been updated';
};
</script>

在子组件中依然使用 inject 获取数据：

<template>
  <div>
    <p>{{ injectedData }}</p>
  </div>
</template>

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

const injectedData = inject('globalData');
</script>

命名冲突问题：如果不同的父组件提供了相同名称的数据或方法，可能会导致命名冲突。
- 解决方案：使用唯一的标识符作为 provide 的 key，例如使用组件的名称作为前缀。或者使用一个对象来包含所有提供的数据，并给对象一个唯一的 key。例如：

<template>
  <div id="app">
    <Child1 />
  </div>
</template>

<script setup>
import { provide } from 'vue';
import Child1 from './components/Child1.vue';

const appData = {
  globalData: 'This is global data',
  someMethod: () => console.log('This is a method')
};
provide('appSpecificData', appData);
</script>

在子组件中：

<template>
  <div>
    <p>{{ injectedData.globalData }}</p>
    <button @click="injectedData.someMethod">Call Method</button>
  </div>
</template>

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

const injectedData = inject('appSpecificData');
</script>

调试困难：由于数据传递不是直接的父子关系，调试时可能较难追踪数据的来源和变化。
- 解决方案：可以在 provide 和 inject 的地方添加日志输出，以便在调试时了解数据的传递情况。也可以使用 Vue Devtools，它能够显示组件树以及组件之间提供和注入的数据。

星途面试题库

面试题：Vue 3 Composition API 下的依赖注入与代码组织优化

知识考点

面试题答案

1. 使用 provide 和 inject 进行依赖注入的方式

2. 相较于传统父子组件传参的优势

3. 可能遇到的问题及解决方案