Vue3 watch 监听 一个有多个属性的对象. 当某个属性发生变化时,返回这个属性的, key:value, 而不是返回整个对象,请教!

**vue3 watch 监听对象

目的: watch 监听有多个属性的对象.
当某个属性发生变化时,返回这个属性的, key:value,
而不是返回整个 对象

这个有什么简便的方法.
还是只能写个函数进行 比对?**

如果只能自定义函数去比对, 有什么好的方法? 这个对象里,还嵌套了对象

1开启深度监听属性值，deep:true
2触发watch后，对比新旧对象，就知道是哪个属性变化了

可以直接只监听对象中的某个属性的

可以直接只监听对象中的某个属性的

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{ obj.obj1.name }}</div>
    <button @click="nameChange">nameChange</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const msg = ref('hello world!')
const obj = ref({
  obj1: {
    obj2: {
      name: 'obj2'
    },
    name: 'obj1'
  }
})

watch(() => obj.value.obj1.name, (name, prevName) => {
  console.log('nameWatch', prevName)
})

const nameChange = () => {
  obj.value.obj1.name = Date.now()
}
</script>

watch(message, (newVal, oldVal) => {
console.log(newVal);
console.log(oldVal);
}, {
deep: true,
immediate: true
})