Vue 3 中怎么用 watch 监听分页页码变化自动向后端发起翻页请求-Vue.js-PHP中文网

vue 3 中用 watch 监听分页页码变化自动请求数据，需确保页码响应式、设置 immediate: true、控制 loading 状态、防重复请求并做好错误处理。

vue 3 中怎么用 watch 监听分页页码变化自动向后端发起翻页请求

在 Vue 3 中，用 watch 监听分页页码（如 currentPage）变化并自动触发接口请求，是最常见的分页联动方式。关键在于：页码是响应式数据、监听要立即执行（immediate: true）、避免重复请求（加防抖或 loading 控制）、确保请求完成后再更新数据。

1. 基础写法：watch 监听 ref 或 reactive 的页码字段

假设你用 ref 管理当前页码：

const currentPage = ref(1);
const pageSize = ref(10);
const list = ref([]);
const loading = ref(false);

// 监听 currentPage 变化，自动拉取数据
watch(
  currentPage,
  async (newVal, oldVal) => {
    if (newVal === oldVal) return;
    loading.value = true;
    try {
      const res = await api.getList({ page: newVal, size: pageSize.value });
      list.value = res.data || [];
    } catch (err) {
      console.error('分页请求失败', err);
    } finally {
      loading.value = false;
    }
  },
  { immediate: true } // 页面加载时就请求第 1 页
);

2. 更稳妥的写法：监听多个依赖 + 防抖（可选）

如果页码和每页条数都可能变化（比如用户可调 pageSize），推荐监听一个计算属性或数组：

const currentPage = ref(1);
const pageSize = ref(10);

// 方式一：watch 数组（推荐用于少量确定依赖）
watch(
  () => [currentPage.value, pageSize.value],
  async ([page, size]) => {
    loading.value = true;
    try {
      const res = await api.getList({ page, size });
      list.value = res.data || [];
    } finally {
      loading.value = false;
    }
  },
  { immediate: true }
);

如果翻页操作频繁（比如快速点“下一页”按钮），可简单加防抖：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

import { debounce } from 'lodash-es';

watch(
  () => currentPage.value,
  debounce(async (val) => {
    loading.value = true;
    const res = await api.getList({ page: val, size: pageSize.value });
    list.value = res.data || [];
    loading.value = false;
  }, 200)
);

3. 结合 Composition API 封装成可复用逻辑（usePagination）

把分页逻辑抽成自定义 Hook，更清晰也方便复用：

// composables/usePagination.js
import { ref, watch, onBeforeUnmount } from 'vue';
import { debounce } from 'lodash-es';

export function usePagination(requestFn, options = {}) {
  const {
    initialPage = 1,
    initialSize = 10,
    autoLoad = true,
    delay = 0,
  } = options;

  const currentPage = ref(initialPage);
  const pageSize = ref(initialSize);
  const list = ref([]);
  const total = ref(0);
  const loading = ref(false);
  const abortController = ref(null);

  const reload = async () => {
    if (abortController.value) abortController.value.abort();
    abortController.value = new AbortController();

    loading.value = true;
    try {
      const res = await requestFn({
        page: currentPage.value,
        size: pageSize.value,
        signal: abortController.value.signal,
      });
      list.value = res.list || [];
      total.value = res.total || 0;
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('分页加载失败', err);
      }
    } finally {
      loading.value = false;
    }
  };

  if (autoLoad) {
    const handler = delay ? debounce(reload, delay) : reload;
    watch(
      () => [currentPage.value, pageSize.value],
      () => handler(),
      { immediate: true }
    );
  }

  onBeforeUnmount(() => {
    if (abortController.value) abortController.value.abort();
  });

  return {
    currentPage,
    pageSize,
    list,
    total,
    loading,
    reload,
  };
}

在组件中使用：

import { usePagination } from '@/composables/usePagination';
import { getListApi } from '@/api/list';

export default {
  setup() {
    const { currentPage, pageSize, list, loading, reload } = usePagination(
      (params) => getListApi(params),
      { delay: 150 }
    );

    const handlePageChange = (page) => {
      currentPage.value = page;
    };

    return {
      currentPage,
      pageSize,
      list,
      loading,
      handlePageChange,
    };
  }
};

4. 注意事项和常见坑

不要在 watch 回调里直接修改被监听的值，否则可能造成无限循环（比如在监听 currentPage 时又给它赋新值，且没加条件判断）
接口报错时记得置 loading = false，否则 loading 状态卡住，用户无法操作
服务端返回 total 后，建议同步更新分页器的总页数，避免跳转到无效页码
路由分页场景（如 /list?page=3）需配合 watch 路由参数，而不是只监听本地 ref
如果用的是 reactive 包裹的分页对象，watch 时要传 getter 函数：watch(() => pagination.page, ...)