Vue3 监听引用类型的值

55 阅读1分钟

Vue3监听引用类型的值的时候该如何操作?

我先在这里定义一个对象

let message = reactive({
  foo:{
    bar:{
      name:"FM",
      age:18
    }
  }
})

我通过watch去监听整个对象时是没问题的。

watch(message,(value,oldValue)=>{
  console.log(value,oldValue)
})

image.png

如果我想要监听内部的name的值我该如何操作

//以下是错误演示,watch监听的需要是一个响应式的对象
watch(message.foo.bar.name,(value,oldValue)=>{
  console.log(value,oldValue)
})
//以下是正确演示
watch(() => message.foo.bar.name,(value,oldValue)=>{
  console.log(value,oldValue)
})

image.png