有以下数据结构
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函数形式