vue 3 中用 watch 监听商品数量变化并校验库存，需监听响应式 quantity ref 或取值函数，超限时自动修正并更新 isoverstock 状态以禁用按钮和提示用户，注意防无限循环、异步库存守卫及输入类型处理。
监听单个数量 ref 并校验库存
当商品数量用 `ref
- 定义 `quantity = ref(1)` 和 `stock = ref(5)`（库存为响应式更灵活，也可用普通常量）
- 在 `watch` 回调里检查 `newVal > stock.value`，若成立则重设 `quantity.value = stock.value`
- 建议开启 `immediate: false`（默认），避免初始化时误触发；仅响应用户操作
监听对象内嵌的数量字段
若数量是商品对象的属性（如 `product = reactive({ id: 1, name: 'T恤', quantity: 2, stock: 10 })`），有两类写法：
- 监听整个对象 + `deep: true`：能捕获 `quantity` 变化，但性能开销略大，适合字段少、变化频次低的场景
- 监听取值函数：`watch(() => product.quantity, (newVal) => { ... })` —— 更精准、无多余依赖，且不需 `deep`，推荐用于此类明确字段监听
- 注意：若 `product` 是 `ref` 包裹的对象（如 `product = ref({...})`），则监听 `() => product.value.quantity` 即可
联动禁用按钮与显示提示
校验不只是改数值，还需反馈给用户。可借助额外响应式状态驱动 UI：
- 定义 `isOverStock = ref(false)`，在 watch 回调中根据 `quantity.value > stock.value` 动态赋值
- 保存按钮绑定 `:disabled="isOverStock"`，页面显示 `超出库存！最多 {{ stock.value }} 件`
- 如需防抖（比如输入框手动改数字），可在 watch 内部用 `setTimeout` 或封装 `useDebounce`，避免高频校验
避免常见陷阱
几个容易出错的点需要留心：
- 不要监听原始数字变量（如 `let qty = 1`），必须是 `ref` 或 `reactive` 的响应式数据，否则 watch 不生效
- 不要在 watch 回调里直接修改被监听的目标（如 `quantity.value++`），可能引发无限循环
- 库存值若来自接口异步加载，watch 应配合 `onBeforeMount` 或 `watchEffect` 等待 stock 就绪后再启用，或加空值守卫 `if (!stock.value) return`
- 整数校验要留意类型，`parseInt` 或 `Math.floor` 处理输入框字符串，防止 `quantity.value = '3.7'` 导致逻辑异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
