深入理解 Vue.js 中的 deep: true

在Vue.js中，当你使用v-bind或v-model来绑定对象类型的数据到子组件的props时，如果想要确保子组件内部能够响应式地更新父组件传递进来的对象属性的变化，你可以在子组件中使用deep: true选项来递归地监听对象内部属性的变化。

例如，如果你有一个子组件GrandChildComponent，它的props定义如下：

props: {
  childProp: {
    type: Object,
    default: () => ({}),
    deep: true
  }
}

当父组件传递一个对象给childProp时，使用deep: true选项可以确保无论childProp对象内部属性如何变化，子组件都能够响应这些变化。

下面是一个简单的例子：

父组件：

<template>
  <grand-child-component :child-prop="parentProp"></grand-child-component>
</template>
 
<script>
import GrandChildComponent from './GrandChildComponent.vue';
 
export default {
  components: {
    GrandChildComponent
  },
  data() {
    return {
      parentProp: {
        nestedProp: 'initial value'
      }
    };
  },
  mounted() {
    setTimeout(() => {
      this.parentProp.nestedProp = 'updated value';
    }, 1000);
  }
};
</script>

子组件（GrandChildComponent.vue）：

<template>
  <div>{{ childProp.nestedProp }}</div>
</template>
 
<script>
export default {
  props: {
    childProp: {
      type: Object,
      default: () => ({}),
      deep: true
    }
  }
};
</script>

在这个例子中，当父组件中的parentProp.nestedProp发生变化时，子组件能够响应这个变化并显示更新后的值。如果没有在子组件的childProp属性中使用deep: true选项，则子组件不会更新。