Vue3+TypeScript中ref响应式变量修改后watch回调不触发的原因

两种写法均未正确配置监听规则，具体问题如下：

• 直接传scrap ref的写法：ref包裹对象类型值时默认是浅监听，仅当scrap.value被整体替换时才会触发回调。你仅修改内部嵌套的Text属性，属于深层属性变更，浅监听无法捕获。
• 传getter函数() => scrap的写法：getter直接返回了scrap这个ref对象本身，该对象的引用地址从未发生变化，Vue比对新旧值时判定无变更，不会触发回调，且该写法漏写.value，没有正确取到ref包裹的实际值。

根据监听需求选任意一种即可：

1. 监听整个scrap对象的所有属性变更，开启深度监听：

// 直接传ref，开启deep
watch(scrap, () => console.log('change'), { deep: true })

// 或者getter返回实际值再开deep
watch(() => scrap.value, () => console.log('change'), { deep: true })

2. 只监听指定属性，不需要开深度监听，性能更优：

// 单属性监听
watch(() => scrap.value.Text, () => console.log('Text changed'))

// 多属性同时监听，返回数组即可
watch(
  () => [scrap.value.Text, scrap.value.ModificationDate],
  () => console.log('scrap changed')
)

补充说明：在<script setup>语法糖里直接写scrap.Text = xxx本质是语法糖自动补了.value，等价于scrap.value.Text = xxx，写watch的getter时不能依赖这个语法糖，必须手动写.value才能正确取到ref内的值。

内容的提问来源于stack exchange，提问作者WoJ