import { ref, watch } from 'vue'

const price = ref(100)
const count = ref(2)
const coupon = ref(0)

// 同时监听price/count/coupon的变化
watch([price, count, coupon], ([newPrice, newCount, newCoupon], [oldPrice, oldCount, oldCoupon]) => {
  console.log(`总价变化：${oldPrice*oldCount} → ${newPrice*newCount - newCoupon}`)
  // 触发重新计算逻辑
})

const user = reactive({
  info: { name: '张三', age: 25 },
  settings: { theme: 'dark' }
})

// 监听user.info.name和user.settings.theme
watch(
  [
    () => user.info.name,
    () => user.settings.theme
  ],
  ([newName, newTheme]) => {
    console.log(`用户名或主题变更：${newName} - ${newTheme}`)
  }
)

const formData = reactive({ filters: { category: 'food', priceRange: [10,50] } })

//错误：无法检测filters内部变化
watch(formData.filters, (newVal) => { ... })

//正确：深度监听
watch(
  () => formData.filters,
  (newVal) => {
    console.log('筛选条件变化', newVal)
  },
  { deep: true } // 关键深度监听配置
)

// ❌ 冗余监听（filterList自身未变）
watch([filterList], ...) 

// ✅ 改为监听具体属性
watch([() => filterList[0].value], ...)

watch(
  [price, count],
  () => { /* 计算逻辑 */ },
  { immediate: false } // 跳过初始化执行
)

import { debounce } from 'lodash-es'

watch([searchInput, filterType], debounce(([newVal]) => {
  // 搜索请求逻辑
}, 300))

const order = reactive({
  items: [{ price: 20, count: 3 }],
  discount: 0.9,
  coupon: 5
})

// 监听商品总价和优惠信息
watch(
  [
    () => order.items.reduce((sum, item) => sum + item.price * item.count, 0),
    () => order.discount,
    () => order.coupon
  ],
  ([total, discount, coupon]) => {
    finalPrice.value = total * discount - coupon
  }
)