computed 是实现分页页码逻辑的天然选择，自动响应数据变化、缓存结果；通过计算总页数、起始结束页、偏移量及边界处理，声明式生成含省略号的页码数组，并推导上/下页状态。

Vue.js 的 computed 是实现分页页码逻辑封装的天然选择——它自动响应数据变化、缓存结果、避免重复计算，特别适合处理“当前页、总页数、显示哪些页码”这类强依赖关系的逻辑。

页码数组动态生成（含省略逻辑）

分页栏不总要显示全部页码，常见策略是：当前页居中，两边各保留 2 个页码，超出时用“...”代替。利用 computed 可声明式地推导出最终页码数组：

• 先算总页数：totalPages = Math.ceil(total / pageSize)
• 定义左右展示偏移量（如 pageOffset = 2）
• 计算起始页 startPage 和结束页 endPage，考虑边界（第 1 页、最后一页附近）
• 用 Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i) 生成连续页码
• 插入省略号：对比 startPage 是否 > 1，endPage 是否 totalPages，按需在数组开头/结尾添加 '...'

上一页/下一页/首页/尾页状态控制

按钮是否禁用，完全由当前页码决定，computed 可集中管理这些布尔状态：

• canPrev = currentPage > 1
• canNext = currentPage
• canFirst = currentPage !== 1
• canLast = currentPage !== totalPages

模板中直接绑定 :disabled="!canNext"，无需在事件中手动判断。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

立即学习“前端免费学习笔记（深入）”；

页码跳转方法配合 computed 保持响应性

跳转方法（如 goTo(page)）只负责更新 currentPage，其余展示逻辑全交由 computed 自动更新：

• 点击页码、输入框回车、点击“...”后侧页码，都调用 goTo(n)
• goTo 内部做安全校验：n = Math.min(Math.max(1, n), totalPages)
• 更新 this.currentPage = n 后，所有依赖 currentPage 的 computed 属性立刻重新求值

支持外部受控与内部状态解耦

组件既可作为非受控组件（自己维护 currentPage），也可设计为受控模式（通过 props.currentPage + $emit('update:currentPage')）：

• 受控时，将 props.currentPage 作为 computed 的来源，页码数组等仍基于它计算
• 非受控时，用 data() 定义 localPage，computed 基于它运算；goTo 更新 localPage
• 两种模式共享同一套 computed 逻辑，仅数据源不同，复用性高

把页码生成、边界判断、状态派生这些“纯逻辑”交给 computed，组件更轻、更易测、更易维护。不需要 watch、不手动触发更新，数据一变，视图自然跟上。