vue3.2中父传子中watch深度监听

Vue 3.2中，可以通过`watch`选项的`deep`属性来实现深度监听。`deep`属性为一个布尔值，表示是否开启深度监听。当`deep`属性为`true`时，Vue会递归遍历监听对象的所有子属性，当监听的对象或子属性发生变化时，`watch`函数就会被触发。

下面是一个示例：

<template>
  <div>
    <h2>父组件{{message}}</h2>
    <Child :data="data" />
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello Vue!',
      data: {
        name: 'Tom',
        age: 20
      }
    };
  },
  watch: {
    'data': {
      deep: true,
      handler(newVal, oldVal) {
        console.log('父组件中data对象或子属性发生变化');
      }
    }
  }
};
</script>

在上述示例中，父组件中的`data`对象有两个子属性`name`和`age`，在`watch`选项中开启了`deep`属性，当`data`对象或其子属性发生变化时，`handler`函数就会被触发。

需要注意的是，开启深度监听会带来一些性能问题，因为Vue需要递归遍历所有子属性。因此，建议在必要的情况下再开启深度监听。