面试题：Vue中Provide/Inject数据污染问题：子组件如何防止对Inject数据的误修改

Question

在Vue项目中使用Provide/Inject传递了一个对象数据，假设子组件可能会意外修改这个数据，导致数据污染。请描述一种方法来防止子组件对Inject进来的数据进行误修改。

Answer 1

1. 使用Object.freeze方法：
   • 在父组件提供数据时，使用Object.freeze来冻结对象。Object.freeze会阻止对象的属性被添加、删除或修改。
   • 示例代码如下：

   // 父组件
   import { defineComponent } from 'vue';
   export default defineComponent({
     name: 'ParentComponent',
     provide() {
       const dataToProvide = {
         message: 'Hello from parent'
       };
       return {
         frozenData: Object.freeze(dataToProvide)
       };
     },
     setup() {
       return {};
     }
   });
   

   • 子组件注入数据后，尝试修改会被忽略且不会报错（严格模式下会抛出错误）。

   // 子组件
   import { defineComponent, inject } from 'vue';
   export default defineComponent({
     name: 'ChildComponent',
     setup() {
       const frozenData = inject('frozenData');
       // 尝试修改
       // frozenData.message = 'New message'; // 此操作无效，不会改变数据
       return {};
     }
   });
   

2. 使用计算属性：
   • 在子组件中，通过计算属性来代理注入的数据，并提供只读访问。
   • 示例代码如下：

   // 父组件
   import { defineComponent } from 'vue';
   export default defineComponent({
     name: 'ParentComponent',
     data() {
       return {
         originalData: {
           value: 42
         }
       };
     },
     provide() {
       return {
         sharedData: this.originalData
       };
     },
     setup() {
       return {};
     }
   });
   

   // 子组件
   import { defineComponent, inject } from 'vue';
   export default defineComponent({
     name: 'ChildComponent',
     setup() {
       const sharedData = inject('sharedData');
       const readonlyData = computed(() => sharedData);
       return {
         readonlyData
       };
     }
   });
   

   • 这样在模板中使用readonlyData，它是只读的，不能直接修改。如果尝试在代码中修改readonlyData.value会报错，从而防止误修改。