vue3+ts 中watch函数监听父组件传给子组件的值

在Vue3中，可以使用`watch`函数来监听父组件传给子组件的值。根据引用[1]中的代码，子组件通过`defineExpose`暴露了自己的属性`inputVal`和方法`exposeFun`。在父组件中，可以使用`watch`函数来监听子组件的属性变化。例如，如果要监听子组件的`inputVal`属性，可以这样写：

import { watch } from 'vue';

watch(() => SonVue.inputVal, (newVal, oldVal) => {
  console.log('子组件的inputVal发生变化', newVal, oldVal);
});

这样，当子组件的`inputVal`属性发生变化时，回调函数就会被触发，并打印出新值和旧值。需要注意的是，`watch`函数的第一个参数是一个函数，返回要监听的值，而不是直接传入要监听的值本身。所以在这里，我们使用了箭头函数来返回`SonVue.inputVal`。

另外，根据引用[3]中的代码，`watch`函数还可以监听多个值或对象的属性。如果要监听多个值，可以将这些值放在一个数组中传入`watch`函数。如果要监听对象的属性，可以将一个函数返回这个属性的值。例如，如果要监听子组件的`inputVal`和父组件的`msg`，可以这样写：

watch([() => SonVue.inputVal, () => msg.value], ([newInputVal, newMsg], [oldInputVal, oldMsg]) => {
  console.log('子组件的inputVal和父组件的msg任意一个发生变化都触发', newInputVal, oldInputVal, newMsg, oldMsg);
});

这样，当子组件的`inputVal`或父组件的`msg`发生变化时，回调函数就会被触发，并打印出新值和旧值。

总结起来，Vue3中可以使用`watch`函数来监听父组件传给子组件的值，可以监听单个值、多个值或对象的属性。