vue3.0 无法侦听响应式reactive对象的属性值

如果可以实现记得点赞分享，谢谢老铁～

注意，你不能直接侦听响应式对象的属性值，例如:

const obj = reactive({
    
     count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
    
    
  console.log(`count is: ${
      
      count}`)
})

1.这里需要用一个返回该属性的 getter 函数：

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    
    
    console.log(`count is: ${
      
      count}`)
  }
)

2.你也可以显式地加上 deep 选项，强制转成深层侦听器：

watch(
  () => obj,
  (newValue, oldValue) => {
    
    
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* obj.count 被整个替换了
  },
  {
    
     deep: true }
)

谨慎使用deep
深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。