Vue3中我的Watch为什么总监听不到数据详解

// 方式一：使用函数
watch(() => obj.property, (val) => {
  console.log('值变化了:', val)
})

// 方式二：直接监听响应式对象
watch(obj, (val) => {
  console.log('对象变化了:', val)
})

const obj = reactive({ 
  nested: { 
    value: 1 
  } 
})

// ❌ 监听不到 nested.value 的变化
watch(() => obj.nested, (val) => {
  console.log('不会触发')
})

// ✅ 需要深度监听
watch(() => obj.nested, (val) => {
  console.log('会触发')
}, { deep: true })

// ✅ 或监听具体属性
watch(() => obj.nested.value, (val) => {
  console.log('会触发')
})

const arr = reactive([1, 2, 3])

// ❌ 监听不到 push/pop 等操作
watch(() => arr.length, (val) => {
  console.log('可能不会触发')
})

// ✅ 直接监听数组
watch(arr, (val) => {
  console.log('会触发')
})

const obj = reactive({ x: 1, y: 2 })

// ❌ 解构会丢失响应性
const { x } = obj
watch(x, (val) => { }) // 无效

// ✅ 使用 getter 函数
watch(() => obj.x, (val) => {
  console.log('会触发')
})

// 监听特定属性
watch(() => user.name, (name) => {
  console.log('用户名变化:', name)
})

// 监听计算值
watch(() => x.value + y.value, (sum) => {
  console.log('和变化:', sum)
})

// 监听整个响应式对象
watch(state, (newState) => {
  console.log('状态变化:', newState)
}, { deep: true })

// 监听数组
watch(items, (newItems) => {
  console.log('列表变化:', newItems)
})

const count = ref(0)

// ✅ 正确：直接监听 ref
watch(count, (val) => {
  console.log('count变化:', val)
})

// ✅ 也正确：通过 .value 监听
watch(() => count.value, (val) => {
  console.log('count变化:', val)
})

const state = reactive({ count: 0 })

// ✅ 推荐：使用 getter 监听特定属性
watch(() => state.count, (val) => {
  console.log('count变化:', val)
})

// ⚠️ 注意：直接监听 reactive 对象会自动开启深度监听
watch(state, (val) => {
  console.log('state变化:', val) // 任何嵌套属性变化都会触发
})