Vue 3 watch 怎么实现分页页码改变触发列表查询-Vue.js-PHP中文网

页码改变时自动触发列表查询，核心是监听 currentpage（或含 pagesize）变化后调用请求方法；vue 3 中推荐用 watch 监听响应式对象 query 的 page、pagesize、keyword，配合 element plus 分页组件绑定 v-model 并重置页码防越界，再通过 isfetching 控制重复请求。

vue 3 watch 怎么实现分页页码改变触发列表查询

页码改变时自动触发列表查询，核心就是监听 currentPage（或含 pageSize）的变化，并在变化后调用请求方法。Vue 3 的 watch 是最直接、可控的方式。

监听单个页码变量

适用于只靠页码变化就需刷新的场景（如搜索条件固定、仅翻页）：

定义响应式页码：const currentPage = ref(1)
用 watch 监听它，变化时执行请求：
<script setup></script>
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"> currentPage = 1" /></el-pagination>
注意：@size-change 里重置页码为 1，避免 pageSize 变大后当前页越界；watch 会自动响应这个重置并重新拉数据
无需额外写 handleCurrentChange 方法——watch 已接管逻辑，代码更集中、不易遗漏