面试题：Vue父子组件数据传递之props的深度更新问题

Question

在Vue父子组件中，通过props传递一个对象数据。当子组件对该对象的属性进行修改时，父组件中的数据会如何变化？如何确保父组件数据能感知到子组件对对象属性深层次的变化？请阐述原理并给出代码示例。

Answer 1

1. 父组件数据变化情况

在Vue父子组件中，通过props传递的对象数据，在子组件对其属性进行修改时，父组件中的数据会同步变化。这是因为JavaScript中对象是引用类型，props传递的是对象的引用，所以子组件对对象属性的修改会直接反映到父组件的对象上。

2. 确保父组件感知深层次变化的原理

Vue通过Object.defineProperty()进行数据劫持，对于对象的直接属性修改可以检测到，但对于对象深层次的属性变化（例如新增属性或修改嵌套对象的属性），Vue无法直接检测。要确保父组件能感知到这些变化，可以使用Vue提供的Vue.set（在Vue 3中为Vue 3.0的reactive API）或者this.$set（仅在Vue实例中可用）方法。这些方法会触发Vue的响应式系统，从而使父组件感知到变化。

3. 代码示例

Vue 2示例

父组件（Parent.vue）：

<template>
  <div>
    <h2>父组件数据: {{ parentData }}</h2>
    <Child :child-data="parentData"></Child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      parentData: {
        name: '初始值',
        age: 20
      }
    };
  }
};
</script>

子组件（Child.vue）：

<template>
  <div>
    <button @click="modifyData">修改数据</button>
  </div>
</template>

<script>
export default {
  props: ['childData'],
  methods: {
    modifyData() {
      // 使用this.$set确保父组件感知变化
      this.$set(this.childData, 'newProp', '新增属性'); 
      // 或者使用Vue.set
      // import Vue from 'vue';
      // Vue.set(this.childData, 'newProp', '新增属性'); 
    }
  }
};
</script>

Vue 3示例

父组件（Parent.vue）：

<template>
  <div>
    <h2>父组件数据: {{ parentData }}</h2>
    <Child :child-data="parentData"></Child>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const parentData = ref({
  name: '初始值',
  age: 20
});
</script>

子组件（Child.vue）：

<template>
  <div>
    <button @click="modifyData">修改数据</button>
  </div>
</template>

<script setup>
import { reactive, set } from 'vue';

const props = defineProps(['childData']);
const modifyData = () => {
  // 使用set确保父组件感知变化
  set(props.childData, 'newProp', '新增属性'); 
};
</script>