vue 关于搜索、列表、分页的最佳实践？

Question

假设现在有一种场景是有一个图书的列表，但是图书实在是太多了，所以在这个页面中，必须将图书以分页的形式展示出来。

在这种情况下还需要一个搜索的功能，帮助用户快速找到图书。

所以界面看起来有点像这样：

这里也许还会有一些条件：

• 每一个页面的数据都会被缓存起来，也就是来回点跳到第一页和第二页不会发送很多次请求；

• 正如上一点所说的，数据并不会被一次性加载，也就是当你看到第一页时，前端并不知道后面的页面的数据；

• 搜索功能的搜索范围是基于所有数据的搜索，而不是基于当前页的搜索过滤，例如现在显示的是第一页，搜索的结果有可能是来自于后面几页的内容。

我现在头脑里面有两种做法，但总觉得不够好：

1. 无论是搜索结果还是原始的列表结果，都使用同一个组件渲染，在 vm 中定义这三个概念：

• data.rawList : 用于记录图书列表

• data.searchList : 用于记录搜索的结果列表

• computed.displayList : 用于真实显示在组件上的数据列表(根据是否正在搜索判断使用上面哪一项数据)

2. 将搜索结果和原始的列表用两个组件分开渲染，使用 v-if 来判断显示哪一个列表。

所以想请教一下大家，怎么样做才更加合适？

Answer 1

1、首先要确认获取的数据量的大小，如果数据量大，那么获取数据的时间就变长，这对用户体验并不好。因此，如果数据量小可以直接用一次请求完成，但数据量大的时候，还是交给服务器处理，按需获取吧。2、关于搜索，如果是一次请求获取所有数据，可以通过v-model绑定搜索框，对数据进行filter筛选，并不需要另外分开组件。如果分开组件，那么就有点重复工作的意思了，反正都是对原数据进行筛选的。2.1、如果是交给服务器处理，那么只需要请求数据就好（分页、搜索功能），如果数据库里数据量大的时候推荐这样做，性能优化交给服务器就好，前端做不了太多优化的。3、如果觉得还是一次请求数据，那么可以延时请求，先请求小量数据的用于展示，再setTimeout把整个数据下载下来。总结：不建议把搜索和默认显示分开，因为都是对原始数据进行筛选。