故事背景
watch 的数据源发生了变化，但是没有调用回调函数
问题定位
数据源是一个 getter 函数，getter 函数返回的是一个 ref 对象。
- 预期的是： ref 的属性值发生变化后调用回调函数
- 实际上是：当 watch 的数据源是一个 getter 函数时，回调函数只在函数的返回值发生变化时才会触发，又因为返回值是一个 ref 对象，对象的引用值没有变化，所以认为对象没有变化，不会触发回调函数的调用。
处理方案（2选1）
- 将数据源改为响应式对象，即，不使用 getter 函数（当数据源是响应式对象时，侦听器会自动启用深层模式）
- 使用 { deep: true } 强制侦听器进入深层模式
扩展内容
📌 注意：数据源使用值和 getter 函数时的区别 watch() 默认是懒监听的，即仅在数据源发生变化时才执行回调函数。
当使用 getter 函数作为数据源时，回调函数只在此函数的返回值发生变化时才会触发，如果想让回调在深层次变更时也能触发，需要使用 { deep: true } 强制侦听器启用深层模式。
js
const state = reactive({ count: 0 })
watch(() => state, () => {
/* 这里数据源是一个 getter 函数，回调函数只在返回值变化时才会触发
* 因为返回值是一个对象，对象的值是否相同是基于对象在内存中的引用地址进行比较的
* 在这个场景下，只是修改 state.count 的值，对象在内存中的引用地址不会变化，会被认为是同一个值，所以不会触发回调函数的调用
* 如果期望在 state.count 变化后，调用回调函数，需要使用 { deep: true } 强制侦听器进入深层级模式
*/
})当直接侦听一个响应式对象时，侦听器会自动启用深层模式：
js
const state = reactive({ count: 0 })
watch(state, () => {
/* 这里侦听的是一个响应式对象，侦听器默认启用深层次模式 */
})1点思考
数据源应该优先考虑使响应式对象：ref/reactive（代码写的更少，还会自动启用深层模式）
如果想要侦听的数据不是响应式对象时再考虑使用 getter 函数