vue3 reactive对象的watch

代码

<script setup>
import { ref,reactive, watch } from 'vue'

const obj = reactive({ count: 0 })
const yourKnow0 = ref('')
const yourKnow1 = ref('')
let cnt = 0

watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
yourKnow0.value = JSON.stringify(newValue)
yourKnow1.value =  JSON.stringify(oldValue)
console.log(cnt++,'=',JSON.stringify(newValue),JSON.stringify(oldValue))
})

obj.count++
</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="obj.count" />
  </p>
  <p>{{ obj.count }}</p>
  <p>changed: {{ yourKnow0 }}</p>
  <p>changed: {{ yourKnow1 }}</p>
</template>

官方这么说：

Tips: 也就是说，oldValue没用！建议自己加个影子对象来对比前后更改
官方文档及其示例：

1. https://cn.vuejs.org/api/reactivity-core.html#watch
2. https://cn.vuejs.org/guide/essentials/watchers.html#deep-watchers