面试题：Vue中Provide/Inject跨层级组件通信的基本原理及使用场景

Question

请阐述Vue Provide/Inject跨层级组件通信的基本原理，并举例说明在哪些实际开发场景中会用到这种通信方式。

Answer 1

基本原理

1. Provide：在祖先组件中通过 provide 选项来提供数据，这个数据可以被其所有子孙组件访问。provide 选项的值可以是一个对象或者是一个返回对象的函数。例如：

export default {
  provide: {
    message: 'Hello from ancestor'
  },
  // 或者
  provide() {
    return {
      message: 'Hello from ancestor'
    };
  }
}

2. Inject：在子孙组件中通过 inject 选项来接收祖先组件提供的数据。inject 选项的值是一个数组，数组元素是要接收的数据的键名，或者是一个对象，对象的键名是要接收的数据的键名，值可以是默认值等配置。例如：

export default {
  inject: ['message'],
  created() {
    console.log(this.message); // 'Hello from ancestor'
  }
  // 或者
  inject: {
    message: {
      default: 'default value'
    }
  }
}

Vue 会在组件实例创建时，将祖先组件提供的数据注入到子孙组件中，使得子孙组件可以直接使用这些数据，而无需通过中间组件层层传递。

实际开发场景

1. 全局状态管理的轻量级替代：在一些小型项目或者局部组件树中，不需要引入像 Vuex 这样完整的状态管理库时，可以使用 provide/inject 来共享一些全局状态。比如，在一个多步骤的表单组件中，整个表单的进度状态可以通过 provide 传递给各个步骤组件，每个步骤组件通过 inject 获取进度状态，来决定当前步骤的显示样式等。
2. 主题切换：应用可能需要提供多种主题切换功能，顶层组件可以通过 provide 提供当前主题相关的配置信息（如颜色、字体等），子孙组件（如按钮、文本框等UI组件）通过 inject 获取这些主题配置信息，从而根据主题进行样式渲染。
3. 多语言切换：在国际化应用中，顶层组件可以 provide 当前的语言环境信息，子孙组件（如文本显示组件等）通过 inject 获取语言环境信息，来决定显示何种语言的文本。