面试题：Vue中Provide/Inject实现全局配置时需注意什么

响应式问题：
- Provide 的数据如果不是响应式的，当数据变化时，Inject 接收数据的组件不会自动更新。例如，若直接在 provide 中定义一个普通对象 { value: '初始值' }，当在其他地方修改 value 时，inject 该对象的组件不会感知到变化。
作用域问题：
- Provide/Inject 是针对一个祖先组件到其所有子孙组件的依赖注入，可能会导致数据在不期望的子孙组件中被注入。例如，在一个多层嵌套的组件结构中，可能会意外地将一些只应在特定分支使用的配置注入到其他无关的子孙组件中。
命名冲突：
- 当项目规模较大，不同模块的祖先组件可能会 provide 相同名字的数据。比如两个不同功能模块的父组件都 provide 了名为 config 的数据，这会导致 inject 时产生冲突，难以确定实际注入的数据来源。

确保响应式：
- 如果希望 inject 的数据能响应变化，应使用 Vue 的响应式数据定义方式。比如使用 reactive（Vue3）或 Vue.observable（Vue2）来定义 provide 的数据。例如在 Vue3 中：
```
import { reactive } from 'vue';
export default {
  provide() {
    const globalConfig = reactive({
      theme: 'light'
    });
    return {
      globalConfig
    };
  }
}
```
明确作用域：
- 在设计组件结构和使用 Provide/Inject 时，要清晰界定数据的作用范围。可以通过组件命名空间或者特定的组件层级约定来避免数据的误注入。例如，为特定功能模块的组件添加统一的前缀，在 provide 和 inject 时结合这个前缀进行命名。
避免命名冲突：
- 采用命名规范来防止冲突。可以使用模块名或功能名作为前缀，例如 userModuleConfig、productModuleConfig。同时，在多人协作开发时，团队应明确命名规则，在提供和注入数据前进行沟通确认。

星途面试题库