总页数 = Math.ceil(total / pageSize)，需用向上取整确保最后一页不被遗漏；total 和 pageSize 必须为响应式值，computed 才能自动更新。
在 Vue 3 中，用 computed 计算总页数非常直接：它依赖于总条目数（total）和每页条目数（pageSize），通过向上取整即可得出。
核心公式要写对
总页数 = Math.ceil(total / pageSize)。不能用 Math.round 或向下取整，否则最后一页不满时会少算一页。
例如：total = 22，pageSize = 10 → Math.ceil(22 / 10) === 3，正确；若用 Math.floor 就得 2，漏掉第 3 页。
在 setup 中声明响应式数据和计算属性
确保 total 和 pageSize 是响应式值（如用 ref 或 reactive），computed 才能自动更新：
立即学习“前端免费学习笔记（深入）”；
import { ref, computed } from 'vue'
export default {
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)
})
return { total, pageSize, totalPages }
}
}
注意边界情况处理
避免除零、负数或非数字输入导致 NaN 或异常：
- 当
total为 0 或负数时，返回 0 - 当
pageSize≤ 0 时，也返回 0（防止除零错误） - 如果后端可能返回
null或undefined，建议提前转换为数字：Number(total.value) || 0
配合分页逻辑一起用更稳妥
总页数常和当前页码 currentPage 一起使用，比如限制 currentPage 不超过 totalPages：
const currentPage = ref(1)
const totalPages = computed(() => Math.ceil((total.value || 0) / (pageSize.value || 1)))
// 切换页码时校验
const goToPage = (page) => {
const safePage = Math.min(Math.max(1, page), totalPages.value || 1)
currentPage.value = safePage
}
