面试题：Vue Provide/Inject在复杂组件结构中的应用

Question

假设存在一个具有多层嵌套组件的Vue应用，从顶层组件A开始，经过中间组件B、C，最终到深层组件D。现在需要在组件D中获取组件A的数据，使用Provide/Inject实现这个功能，并说明在这个过程中可能遇到的数据更新和响应式问题及如何解决。

Answer 1

Provide/Inject 实现数据传递

1. 在组件 A 中提供数据：

   <template>
     <div>
       <component - b></component - b>
     </div>
   </template>
   
   <script>
   import ComponentB from './ComponentB.vue';
   
   export default {
     components: {
       ComponentB
     },
     data() {
       return {
         aData: '这是组件 A 的数据'
       };
     },
     provide() {
       return {
         aData: this.aData
       };
     }
   };
   </script>
   

2. 在组件 D 中注入数据：

   <template>
     <div>
       <p>从组件 A 获取的数据: {{ aData }}</p>
     </div>
   </template>
   
   <script>
   export default {
     inject: ['aData']
   };
   </script>
   

中间组件 B 和 C 无需特殊处理 Provide/Inject 相关代码，只要正常传递子组件即可。

可能遇到的数据更新和响应式问题及解决方法

1. 数据更新问题：
   • 问题描述：当组件 A 中的 aData 发生变化时，组件 D 中的注入数据不会自动更新。因为在 provide 时，传递的是数据的当前值，而不是响应式引用。
   • 解决方法：可以传递一个函数来返回响应式数据。在组件 A 中修改 provide：

     provide() {
       return {
         getAData: () => this.aData
       };
     }
     

     在组件 D 中修改 inject 和使用方式：

     <template>
       <div>
         <p>从组件 A 获取的数据: {{ getAData() }}</p>
       </div>
     </template>
     
     <script>
     export default {
       inject: ['getAData']
     };
     </script>
     

2. 响应式问题：
   • 问题描述：如果传递的是一个对象或数组，即使对象或数组内部发生变化，组件 D 也可能不会检测到更新。
   • 解决方法：确保传递的对象或数组是响应式的。例如，在组件 A 中，使用 reactive 创建响应式数据（对于 Vue 3）：

     import { reactive } from 'vue';
     
     export default {
       data() {
         return {
           // 这里不用 data 定义，用 reactive 定义
           aData: reactive({ value: '这是组件 A 的数据' })
         };
       },
       provide() {
         return {
           aData: this.aData
         };
       }
     };
     

     在组件 D 中直接使用注入的 aData，当 aData.value 变化时，组件 D 会响应式更新。对于 Vue 2，可以使用 Vue.observable 来创建响应式数据并传递。