vue3+ts的watch监听

在 Vue 3 中，我们可以使用 `watch` 函数来监听数据的变化。对于 TypeScript，我们可以使用泛型来指定监听的数据类型。

下面是一个示例：

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

interface UserInfo {
  name: string;
  age: number;
}

export default defineComponent({
  setup() {
    const userInfo = ref<UserInfo>({
      name: 'Tom',
      age: 18,
    });

    watch(userInfo, (newVal, oldVal) => {
      console.log('userInfo changed: ', newVal, oldVal);
    });

    return {
      userInfo,
    };
  },
});

在上面的示例中，我们定义了一个 `UserInfo` 接口来描述用户信息对象的类型。然后使用 `ref` 函数创建了一个响应式的 `userInfo` 对象，并且在 `watch` 函数中监听了 `userInfo` 对象的变化，当 `userInfo` 对象发生变化时，会输出新旧值的信息。

需要注意的是，如果监听的是一个对象或数组，可以使用 `deep` 选项来指定是否深度监听对象或数组中的属性或元素。例如：

watch(userInfo, (newVal, oldVal) => {
  console.log('userInfo changed: ', newVal, oldVal);
}, { deep: true });

这样，当 `userInfo` 对象的属性发生变化时，也会触发监听回调。