Vue 3 中总页数应通过 computed 基于 total 和 pageSize 动态计算，公式为 Math.ceil(total / pageSize)，确保向上取整；响应式更新可自动修正越界页码，避免手动维护或 watch 等冗余操作。
总页数的自动计算在 Vue 3 中最常用、最可靠的方式是用 computed 基于 total（总条数）和 pageSize（每页条数）动态推导，无需手动维护，且响应式更新。
核心公式必须向上取整
总页数不是简单除法，而是：
Math.ceil(total / pageSize)
比如 total=47、pageSize=10 → 47/10 = 4.7 → 向上取整得 5 页。若用 Math.floor 或四舍五入，第 5 页数据会丢失或错乱。
computed 写法示例（组合式 API）
在 setup() 中定义：
const total = ref(0);
const pageSize = ref(10);
const totalPages = computed(() => {
if (total.value <= 0 || pageSize.value <= 0) return 0;
return Math.ceil(total.value / pageSize.value);
});
-
加安全判断：防止除零或负数导致
NaN或 Infinity -
依赖明确：只要
total或pageSize变，totalPages自动重算 -
可直接用于模板：
{{ totalPages }}或传给子组件
配合分页逻辑使用的关键点
这个 totalPages 计算结果要和当前页码 currentPage 协同校验：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 当
currentPage > totalPages && totalPages > 0时，说明当前页已越界，应自动修正为最后一页（currentPage = totalPages） - 在接口返回新
total后，totalPages立即更新，后续页码按钮渲染、禁用状态（如“下一页”是否可用）都能自然响应 - 如果启用了每页条数切换（
page-size），改变pageSize也会触发totalPages重新计算
不建议的做法
避免以下方式，容易出错或失去响应性：
立即学习“前端免费学习笔记（深入）”；
- 在
methods里手动计算并赋值给一个普通 ref（非响应式推导） - 把
totalPages当作 props 从父组件传入却不监听其变化（违背单向数据流） - 用
watch监听total后再赋值——多此一举，computed更简洁可靠
