Vue3中watch监听ref时newValue与oldValue始终相同的问题

我编写了如下代码，希望监听ref对象的newVal与oldVal：

const assessmentForm = ref<IAssessmentScheduleForm>({
      formMethodId: '',
      meetingLink: '',
      meetingSchedule: '',
      testPlaceId: '',
      testPlaceType: ''
    })

    watch(() => {
      return assessmentForm
    }, (val, oldVal) => {
      console.log(val, oldVal)
    }, { deep: true })

但即使添加了.value，打印出的newValue与oldValue仍然始终相同，请问我的代码是否遗漏了什么？

原因与解决办法 #

• 核心原因：你监听的是ref的.value（也就是目标对象的引用），因为对象是引用类型，新旧值指向同一块内存地址，所以打印出来完全一致。Vue的深度监听只会追踪对象内部属性变化，但不会自动克隆旧对象生成独立副本。

• 解决办法：监听时返回对象的独立副本，让新旧值指向不同的内存地址，就能看到真实的差异：

  1. 简单对象用扩展运算符生成副本：

  watch(() => ({ ...assessmentForm.value }), (val, oldVal) => {
    console.log(val, oldVal)
  }, { deep: true })
  

  2. 复杂嵌套对象用structuredClone生成深拷贝副本：

  watch(() => structuredClone(assessmentForm.value), (val, oldVal) => {
    console.log(val, oldVal)
  }, { deep: true })
  

• 额外优化：如果只需监听单个属性，直接监听该属性即可，无需深度监听，新旧值会自然区分：

watch(() => assessmentForm.value.formMethodId, (val, oldVal) => {
  console.log(val, oldVal)
})

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