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