面试题：如何在Vue Provide/Inject中处理响应式数据以优化大型项目依赖注入

Question

假设在一个大型项目中，通过Provide/Inject传递了一个对象数据，且该对象数据的某些属性在子组件中需要被响应式更新，同时要确保依赖注入的高效性。请描述具体的实现方式及原理，包括如何初始化数据、更新数据以及监控数据变化。

Answer 1

实现方式

1. 初始化数据：
   • 在父组件中，使用 provide 提供数据对象。例如：

   export default {
     data() {
       return {
         sharedObject: {
           property1: 'initial value 1',
           property2: 'initial value 2'
         }
       };
     },
     provide() {
       return {
         sharedObject: this.sharedObject
       };
     }
   };
   

   • 在子组件中，使用 inject 注入数据对象：

   export default {
     inject: ['sharedObject']
   };
   

2. 更新数据：
   • 为了使对象属性响应式更新，需要使用 Vue.set 或者 this.$set 方法（在 Vue 2.x 中）。例如，如果要更新 sharedObject 的 property1：

   methods: {
     updateProperty1() {
       this.$set(this.sharedObject, 'property1', 'new value');
     }
   }
   

   • 在 Vue 3.x 中，可以使用 reactive 创建响应式对象，并且直接修改属性即可。假设在 setup 函数中：

   import { reactive } from 'vue';
   export default {
     setup() {
       const sharedObject = reactive({
         property1: 'initial value 1',
         property2: 'initial value 2'
       });
       const updateProperty1 = () => {
         sharedObject.property1 = 'new value';
       };
       return {
         sharedObject,
         updateProperty1
       };
     }
   };
   

3. 监控数据变化：
   • 在 Vue 2.x 中，可以使用 watch 来监控 sharedObject 的变化。例如：

   export default {
     inject: ['sharedObject'],
     watch: {
       sharedObject: {
         handler(newVal, oldVal) {
           // 处理数据变化逻辑
         },
         deep: true
       }
     }
   };
   

   • 在 Vue 3.x 中，在 setup 函数中可以使用 watch 函数：

   import { inject, watch } from 'vue';
   export default {
     setup() {
       const sharedObject = inject('sharedObject');
       watch(sharedObject, (newVal, oldVal) => {
         // 处理数据变化逻辑
       }, { deep: true });
       return {
         sharedObject
       };
     }
   };
   

原理

1. Provide/Inject：
   • provide 和 inject 主要用于实现跨层级组件间的数据传递，它可以将数据从父组件注入到子孙组件中，而不需要通过 props 层层传递。这种方式适合于一些需要在多个层级组件间共享的数据。
2. 响应式原理：
   • 在 Vue 2.x 中，Vue 会通过 Object.defineProperty 对数据对象进行劫持，当数据变化时通知依赖进行更新。但是对于对象新增属性，Object.defineProperty 无法检测到，所以需要使用 Vue.set 或 this.$set 方法来确保新增属性也能被响应式追踪。
   • 在 Vue 3.x 中，使用 Proxy 代替了 Object.defineProperty。Proxy 可以对整个对象进行代理，而不是对对象的每个属性进行劫持，所以直接修改响应式对象的属性就能被检测到变化。
3. 数据监控原理：
   • watch 会对数据进行依赖收集，当数据变化时，触发对应的 handler 函数。deep: true 选项用于深度监听对象内部属性的变化，这样即使对象内部深层嵌套的属性变化，也能被监听到。