Vue3 watch API 踩坑记录

遇到一个很简单的需求，监听一个props属性。却遇到了问题：监听的属性变化时，没有得到预期的响应。总结如下。

1、Vue3可以使用watchAPI，写法示例：
watch( () => state.count, (count, prevCount) => { /* ... */ } )
①其中第一个参数是要监听的数据源（必须是响应式的），有两种写法：
字符串string： 顶层的 data、props 或 computed property 名。
函数Function： 使用函数表示更复杂的表达式。
②第二个参数是回调函数，数据源变化时执行。

2、监听的属性为对象、数组并想知道其对象属性、数组元素的变化时
使用watch的第三个参数：选项参数，在这个参数中添加{ deep:true }，就可以监听对象内部值的变化。
但新值旧值指向同一个引用，不会保留preCount。
若不使用该选项，则应尝试①直接监听具体的对象属性（数组元素）或②改变整个对象（数组）；

Tip：使用数组的push()、pop()这类方法时不会改变整个数组，只能使用{ deep:true }监听

3、关于watch的位置
在选项式API中，watch单独占一个选项，不会有位置的问题。但在组合式API中，需要注意watch执行的位置。
很个别的情况下，watch必须放在数据定义的后面（Vue的bug or feature？），如：

watch(() => props.arr, () => {
  console.log('监听到改变')
  console.log(comp.value)
}, { deep: true })

let comp = shallowRef(f(props.arr))

会报
[Vue warn]: Unhandled error during execution of watcher callback
和
Uncaught TypeError: Cannot read properties of undefined (reading 'value')
改了顺序之后，警告和错误会消失。