展示分页数据的两种方式

PS：下面讨论的时候，是基于vue提供的数据绑定功能的，即修改数据会自动更新视图。

前端展示分页查询到的数据有两种方式：

1. 新的分页数据添加到当前页面末尾，页面同时可以显示多份分页数据。这种方式一般体现为页面下拉触底后触发查询，比如京东首页、知乎首页。
2. 新的分页数据替换掉当前页面的分页数据，页面同时只能显示一份分页数据。这种方式一般体现为用户按下分页器按钮后触发查询，比如博客园首页、京东的搜索结果页。

这两种分页数据展示方式在只进行查询操作的时候区别不大，都挺好用，但涉及到增、删、改操作的时候，就有较大的区别了。

对于方式1：

• 增：后端返回成功后，在前端的记录列表合适的位置（因为记录列表可能不是按照添加的先后顺序排序的，比如按照名称排序）插入该记录即可；
• 删：后端返回成功后，在前端的记录列表中删除该记录即可；
• 改：后端返回成功后，在前端的记录列表中修改该记录，并调整到合适的位置即可；

对于方式2：

• 增：后端返回成功后，前端无法确定当前记录是否在当前页中显示，需要重新查询；
• 删：后端返回成功后，前端需要查询一条新的记录来补在当前页末尾，也可以重新查询；
• 改：后端返回成功后，前端无法确定当前记录是否在当前页中显示，需要重新查询；

这两种方式不能说谁好谁差，现实开发中都有要用到的场景。但如果自己做一个后台管理系统的话，推荐使用方式2，因为实现起来比较简单，方式1要麻烦一点，并且性能上方式1要优于方式2（因为方式2在增、改后要重新发起查询请求）。