面试题：Vue中Provide/Inject传递复杂数据结构时如何保证数据响应式

Question

在Vue项目中，使用Provide/Inject传递一个包含多层嵌套对象和数组的复杂数据结构，如何确保当这个复杂数据结构中的某个深层次属性发生变化时，接收方能够实时响应并更新视图？请描述具体的实现思路及可能用到的Vue特性。

Answer 1

1. 实现思路：
   • 使用响应式数据：确保传递的复杂数据结构是Vue的响应式数据。在Vue中，通过reactive（Vue3）或Vue.observable（Vue2）可以将普通对象转换为响应式对象。这样，当对象的属性发生变化时，Vue的响应式系统能够检测到变化。
   • 深度监听：对于多层嵌套的对象和数组，需要确保Vue能够深度监听其变化。Vue的响应式系统默认会深度监听对象的属性变化，但对于数组，可能需要使用特定的方法（如push、pop、shift、unshift、splice等）来触发视图更新。
   • Provide/Inject的使用：在父组件中使用provide提供数据，在子组件中使用inject接收数据。这样，子组件就可以获取到父组件传递的复杂数据结构。
2. 可能用到的Vue特性：
   • 响应式原理：Vue的核心特性之一，通过Object.defineProperty（Vue2）或Proxy（Vue3）来实现数据的响应式监听。
   • Computed属性：如果接收方需要基于传递的复杂数据结构进行一些计算，可以使用计算属性。计算属性会缓存其依赖的数据，只有当依赖数据变化时才会重新计算，从而提高性能。
   • Watchers：可以使用watch来监听传递的复杂数据结构中的特定属性变化。当该属性变化时，可以执行相应的操作，如更新视图或触发其他逻辑。
   • Vue3的reactive和ref：reactive用于创建响应式对象，ref用于创建响应式数据。在传递复杂数据结构时，reactive更适合处理对象，ref适合处理基本数据类型，但在使用ref包裹对象或数组时，也能实现响应式效果。例如：

   <!-- 父组件 -->
   <template>
     <div>
       <!-- 其他内容 -->
     </div>
   </template>
   <script setup>
   import { reactive } from 'vue';
   const complexData = reactive({
     nestedObject: {
       subObject: {
         value: '初始值'
       }
     },
     nestedArray: [1, 2, 3]
   });
   provide('complexData', complexData);
   </script>
   

   <!-- 子组件 -->
   <template>
     <div>
       <p>{{ complexData.nestedObject.subObject.value }}</p>
       <button @click="updateValue">更新值</button>
     </div>
   </template>
   <script setup>
   const complexData = inject('complexData');
   const updateValue = () => {
     complexData.nestedObject.subObject.value = '新值';
   };
   </script>
   

   在上述例子中，父组件通过provide传递complexData，子组件通过inject接收并可以直接使用。当点击按钮更新complexData中的属性时，视图会自动更新。