假设现在有一种场景是有一个图书的列表，但是图书实在是太多了，所以在这个页面中，必须将图书以分页的形式展示出来。
在这种情况下还需要一个搜索的功能，帮助用户快速找到图书。
所以界面看起来有点像这样：
这里也许还会有一些条件：
每一个页面的数据都会被缓存起来，也就是来回点跳到第一页和第二页不会发送很多次请求；
正如上一点所说的，数据并不会被一次性加载，也就是当你看到第一页时，前端并不知道后面的页面的数据；
搜索功能的搜索范围是基于所有数据的搜索，而不是基于当前页的搜索过滤，例如现在显示的是第一页，搜索的结果有可能是来自于后面几页的内容。
我现在头脑里面有两种做法，但总觉得不够好：
无论是搜索结果还是原始的列表结果，都使用同一个组件渲染，在 vm 中定义这三个概念：
data.rawList : 用于记录图书列表
data.searchList : 用于记录搜索的结果列表
computed.displayList : 用于真实显示在组件上的数据列表(根据是否正在搜索判断使用上面哪一项数据)
将搜索结果和原始的列表用两个组件分开渲染，使用 v-if 来判断显示哪一个列表。
所以想请教一下大家，怎么样做才更加合适？
相关分类