Vue.js中计算属性通过响应式数据page、pageSize和list派生分页信息：currentList按页切片数据，totalPages计算总页数，hasPrev/hasNext判断翻页状态。
Vue.js 中计算属性本身不直接实现分页逻辑，但它是封装分页响应式行为和跨组件共享分页状态的天然载体——关键在于把“当前页、每页条数、总数据”作为响应式源，用计算属性派生出当前页数据、分页元信息（如总页数、是否可翻页）等。
用计算属性封装分页核心逻辑
在组件内部定义 page、pageSize 和 list 为响应式数据，再通过计算属性自动推导分页结果：
-
currentList：返回
list.slice((page - 1) * pageSize, page * pageSize)，随 page 或 pageSize 变化实时更新； -
totalPages：返回
Math.ceil(list.length / pageSize) || 1，支持空列表安全计算； -
hasPrev 和 hasNext：分别判断
page > 1和page ，用于控制按钮禁用状态。
通过 provide/inject 实现跨组件分页共享
当多个子组件（如表格、页码栏、统计栏）需共用同一套分页状态时，可在父组件中定义分页响应式数据，并用 provide 暴露出去：
- 父组件中使用
const page = ref(1)、const pageSize = ref(10)、const list = ref([])； - 调用
provide('pagination', { page, pageSize, list })； - 子组件中用
const { page, pageSize, list } = inject('pagination')获取，所有计算属性基于这些响应式引用，天然同步。
抽离为组合式函数提升复用性
将分页逻辑封装成 usePagination(listRef, options) 组合函数，更利于跨组件复用：
- 接收原始数据 ref 和可选配置（如默认 page、pageSize）；
- 内部创建
page、pageSize响应式变量，并返回currentList、totalPages、goto、next、prev等方法与状态； - 在任意组件中调用
const { currentList, totalPages, goto } = usePagination(data)即可获得完整分页能力。
注意服务端分页场景下的配合方式
若实际数据来自接口（即 list 是异步加载的），计算属性仍可工作，但需注意：
- currentList 在 list 为空或未加载完成时返回空数组，UI 层可配合 loading 状态展示骨架屏；
- 翻页操作（如点击下一页）应触发重新请求，例如
goto(newPage)内部调用fetchData({ page: newPage, size: pageSize.value })； - 避免在计算属性中发起请求，保持其纯函数特性；副作用交由事件方法或 watch 处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
