项目里只要用到分页，就会想到使用各种UI框架里的pagination组件。
由于每次分页功能一般是后台实现，前端请求就完事了。没让我想到过这个分页到底是怎么实现的。
直到我现在需要开发一个网页单页面，直接给了我一大堆数据，让我自己做分页，我才发现，原来分页是要区分成前端分页和后端分页的。
-
前端分页：一次性拉取全部数据，前端对所有数据进行分页显示。
- 缺点：下载量大，显示慢，加载时用户体验不好。如果有即时性内容，就不能翻回来的时候更新了。
- 优点：服务器压力请求少，换页时用户体验好。
-
后端分页：后端对数据划分为若干页，前端每次只拉取一页数据并显示。
- 缺点：每次换页都需要访问后端，加重服务器的压力，换页时显示慢。
- 优点：不用一次性拉取所有数据，显示快，用户体验较好。
下面以el-pagination为例。
<div v-for="(item,index) in listData" :key="index">
<span>{{item.title}}</span>
</div>
<el-pagination
layout="prev, next"
@current-change="change"
</el-pagination>
以前的需求，一直在做后端分页。当换页时会回调change返回新的页码，利用新的页码向服务端请求该页数据即可实现分页。
<script>
change(currentPage) {
this.pageBean.pageNo = currentPage;
this.getData(
this.paramMethod({//根据页码调用后端的接口，前端每次只拉取一页数据listData
pageNo: this.pageBean.pageNo,
pageSize: this.pageBean.pageSize,
...//后端所需要的入参
})
);
},
</script>
那如果需要做前端分页的时候，就需要在change方法中单独处理了，思路也是将所有数据根据页码获取到单页所应该展示的数据。。
假如我们现在每页需要展示5条数据，一共有好多条。 那么首先，在刚进入页面时，需要给listData赋值前5条数据。
this.listData = this.details.slice(0, 5);
然后在每次点击切换页面的时候，重新给listData赋值相应的数据。
<script>
change(currentPage) {
const data = this.details;
this.listData = data.slice((currentPage - 1) * 5, currentPage * 5);
},
</script>
这样就实现了，上面listData就是本页应该展示的数据。
这个需求让我想到了一个热梗，当后端一次性给你10w条数据，前端该怎么优雅地处理并展示？
所幸，这次需求的总数据量没那么多。。。哈哈哈
