watch强制开启深度监听的情况

有以下数据结构

let person = reactive({
  age: "18",
  info: {
    name: "高山我梦"
  }
})

 <div>{{ person.info.name }}</div>
  <button @click="person.info.name = '盖亚'">改变</button>

watch(person, (n, o) => {
  console.log(n);
  console.log(o);
})

这时候强制开启了深度监听,因为监听的是一个proxy对象,但是我想单独监听对象里的info呢?

---

因为can only be a getter/effect function, a ref, a reactive object, or an array of these types.[官方提示]

只能监听getter函数,ref和reactive对象,也就是proxy对象,所以要监听proxy里的info有2个方法,直接person.info,因为person.info也是一个proxy,可以直接监听,如果非要用getter函数监听,那么默认是不开启深度监听的

watch(() => person.info, (n, o) => {
  console.log(n);
  console.log(o);
})

监听不了的,因为是用getter函数监听的,这时候需要开启深度监听

watch(() => person.info, (n, o) => {
  console.log(n);
  console.log(o);
}, { deep: true })

总结:当监听的是proxy对象,默认就强制开启深度监听,当用getter函数监听的proxy里的对象,就得手动开启深度监听了

重复:proxy里面的对象也是一个proxy对象,可以直接监听 不用getter函数形式, 也不用加深度监听,也就是可以把()=>去掉,把deep去掉

watch(person.info, (n, o) => {
  console.log(n);
  console.log(o);
})

但是reactive里面的普通类型就不能去掉()=> ,因为他不是ref对象必须用getter函数形式