vue3+ts深度监听watch用法组合式写法

在 Vue 3 中，可以使用组合式 API 进行开发。组合式 API 提供了 `watch` 函数，可以用来深度监听响应式数据的变化。同时，由于使用 TypeScript 进行开发，我们需要使用泛型来确定要监听的数据类型。下面是一个示例代码：

import { defineComponent, watch, Ref } from 'vue';

interface Address {
  city: string;
  district: string;
}

interface Person {
  name: string;
  age: number;
  address: Address;
}

export default defineComponent({
  setup() {
    const person: Ref<Person> = ref({
      name: 'Tom',
      age: 18,
      address: {
        city: 'Beijing',
        district: 'Haidian'
      }
    });

    watch(
      () => person.value,
      (newVal: Person, oldVal: Person) => {
        console.log('person 发生了变化');
      },
      { deep: true }
    );

    watch(
      () => person.value.address,
      (newVal: Address, oldVal: Address) => {
        console.log('person.address 发生了变化');
      },
      { deep: true }
    );

    return {
      person
    };
  }
});

在上面的示例中，我们定义了 `Person` 和 `Address` 两个接口来确定要监听的数据类型。然后使用 `defineComponent` 函数来定义组件，并在 `setup` 函数中定义响应式数据 `person`。接着，使用 `watch` 函数来深度监听 `person` 和 `person.address` 的变化。由于使用了 TypeScript，我们需要在回调函数中指定 `newVal` 和 `oldVal` 的类型。最后，将 `person` 对象返回以便在模板中使用。