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

// 方式二：直接監(jiān)聽響應(yīng)式對象
watch(obj, (val) => {
  console.log('對象變化了:', val)
})

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

// ? 監(jiān)聽不到 nested.value 的變化
watch(() => obj.nested, (val) => {
  console.log('不會觸發(fā)')
})

// ? 需要深度監(jiān)聽
watch(() => obj.nested, (val) => {
  console.log('會觸發(fā)')
}, { deep: true })

// ? 或監(jiān)聽具體屬性
watch(() => obj.nested.value, (val) => {
  console.log('會觸發(fā)')
})

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

// ? 監(jiān)聽不到 push/pop 等操作
watch(() => arr.length, (val) => {
  console.log('可能不會觸發(fā)')
})

// ? 直接監(jiān)聽數(shù)組
watch(arr, (val) => {
  console.log('會觸發(fā)')
})

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

// ? 解構(gòu)會丟失響應(yīng)性
const { x } = obj
watch(x, (val) => { }) // 無效

// ? 使用 getter 函數(shù)
watch(() => obj.x, (val) => {
  console.log('會觸發(fā)')
})

// 監(jiān)聽特定屬性
watch(() => user.name, (name) => {
  console.log('用戶名變化:', name)
})

// 監(jiān)聽計(jì)算值
watch(() => x.value + y.value, (sum) => {
  console.log('和變化:', sum)
})

// 監(jiān)聽整個(gè)響應(yīng)式對象
watch(state, (newState) => {
  console.log('狀態(tài)變化:', newState)
}, { deep: true })

// 監(jiān)聽數(shù)組
watch(items, (newItems) => {
  console.log('列表變化:', newItems)
})

const count = ref(0)

// ? 正確：直接監(jiān)聽 ref
watch(count, (val) => {
  console.log('count變化:', val)
})

// ? 也正確：通過 .value 監(jiān)聽
watch(() => count.value, (val) => {
  console.log('count變化:', val)
})

const state = reactive({ count: 0 })

// ? 推薦：使用 getter 監(jiān)聽特定屬性
watch(() => state.count, (val) => {
  console.log('count變化:', val)
})

// ?? 注意：直接監(jiān)聽 reactive 對象會自動開啟深度監(jiān)聽
watch(state, (val) => {
  console.log('state變化:', val) // 任何嵌套屬性變化都會觸發(fā)
})