监听筛选条件变化时需将 currentPage 重置为 1，应使用 deep: true 或 getter 函数确保捕获内部属性变更，配合 immediate: true 处理首次挂载，并在回调中防抖调用 fetchData。
直接监听筛选条件 props，变化时把分页码（比如 currentPage）设回 1 即可。关键不是“怎么写 watch”，而是**确保监听时机正确、触发逻辑可靠**——尤其要处理首次挂载是否重置、是否需深度监听、是否避免重复触发等问题。
监听筛选对象的每个字段变化
当父组件传入的是一个筛选对象（如 filters: { status: '', payType: '', dateRange: [] }），不能只监听整个对象引用，否则内部属性修改不会触发：
- 用 getter 函数监听具体字段，例如 () => props.filters.status，适合单字段联动（如改状态就重置页码）
- 更常用的是监听整个对象并开启 deep: true，确保任意字段变化都捕获到
- 回调里统一重置 currentPage.value = 1，后续再触发数据请求
监听多个独立的筛选 prop
如果父组件把筛选条件拆成多个 props（如 status、payType、startTime），可批量监听：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 把它们放进数组传给 watch：watch([props.status, props.payType, props.startTime], () => { currentPage.value = 1 })
- 这样任一条件变动都会重置页码，逻辑清晰，无需深度配置
- 注意：数组中每个元素必须是响应式源（ref 或 reactive 的属性），不能是普通字符串
首次挂载时要不要重置？用 immediate 控制
多数场景下，子组件初始化时应以父组件传来的筛选条件为准，分页也应从第 1 页开始：
- 加 { immediate: true }，watch 回调会在 setup 执行完立即运行一次
- 这样既处理了初始值，又响应后续变更，避免手动在 onMounted 里重复写重置逻辑
- 若业务要求“首次不重置”（比如保留上一次的页码），则去掉 immediate，仅响应变化
重置后自动触发请求，别忘了防抖或取消旧请求
重置页码只是第一步，通常紧接着要重新拉取数据。这时要注意副作用管理：
- 在 watch 回调里调用 fetchData()，且把 currentPage 作为参数传入
- 如果筛选条件频繁输入（如搜索框），建议对 fetchData 做防抖，或使用 abortController 取消未完成请求
- 避免在 watch 中直接修改 props —— 它们是只读的，所有状态更新都应在子组件内部 ref 或 reactive 中进行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
