页码改变时自动触发列表查询，核心是监听 currentPage（或含 pageSize）变化后调用请求方法；Vue 3 中推荐用 watch 监听响应式对象 query 的 page、pageSize、keyword，配合 Element Plus 分页组件绑定 v-model 并重置页码防越界，再通过 isFetching 控制重复请求。
页码改变时自动触发列表查询，核心就是监听 currentPage（或含 pageSize）的变化，并在变化后调用请求方法。Vue 3 的 watch 是最直接、可控的方式。
监听单个页码变量
适用于只靠页码变化就需刷新的场景（如搜索条件固定、仅翻页）：
- 定义响应式页码：
const currentPage = ref(1) - 用
watch监听它，变化时执行请求：
<script setup>
import { ref, watch } from 'vue'
import { getUserList } from '@/api/user'
const currentPage = ref(1)
const list = ref([])
const total = ref(0)
const loadList = async () => {
try {
const res = await getUserList({ pageNum: currentPage.value })
list.value = res.data.list
total.value = res.data.total
} catch (err) { /* 处理错误 */ }
}
watch(currentPage, loadList, { immediate: true })
监听多个分页参数（推荐）
实际项目中，页码、每页条数、搜索关键词常一起影响查询结果，建议统一监听：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 把关键参数收进一个响应式对象：
const query = reactive({ page: 1, pageSize: 10, keyword: '' }) - 用数组形式监听多个取值函数，确保任意一项变都触发请求：
watch(
[() => query.page, () => query.pageSize, () => query.keyword],
() => loadList(),
{ immediate: true }
) - 这样既避免重复请求（比如页码和 pageSize 同时改只触发一次），又覆盖所有变更路径
配合 Element Plus 分页组件使用
绑定 v-model:current-page 和 v-model:page-size 后，它们会自动更新对应 ref，watch 就能捕获变化：
立即学习“前端免费学习笔记（深入）”；
- 模板中：
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" @size-change="() => currentPage = 1" /> - 注意：
@size-change里重置页码为 1，避免 pageSize 变大后当前页越界；watch 会自动响应这个重置并重新拉数据 - 无需额外写
handleCurrentChange方法——watch 已接管逻辑，代码更集中、不易遗漏
避免重复请求和加载状态管理
watch 本身不处理并发，需手动加防抖或 loading 控制：
- 加个
isFetching状态，请求开始设为true，结束设为false - 在
watch回调开头判断if (isFetching.value) return，防止快速翻页多次触发 - 也可用
watchEffect+onInvalidate实现自动取消上一次未完成请求（适合高级控制）
