假設(shè)現(xiàn)在有一種場景是有一個圖書的列表，但是圖書實在是太多了，所以在這個頁面中，必須將圖書以分頁的形式展示出來。在這種情況下還需要一個搜索的功能，幫助用戶快速找到圖書。所以界面看起來有點像這樣：這里也許還會有一些條件：每一個頁面的數(shù)據(jù)都會被緩存起來，也就是來回點跳到第一頁和第二頁不會發(fā)送很多次請求；正如上一點所說的，數(shù)據(jù)并不會被一次性加載，也就是當(dāng)你看到第一頁時，前端并不知道后面的頁面的數(shù)據(jù)；搜索功能的搜索范圍是基于所有數(shù)據(jù)的搜索，而不是基于當(dāng)前頁的搜索過濾，例如現(xiàn)在顯示的是第一頁，搜索的結(jié)果有可能是來自于后面幾頁的內(nèi)容。我現(xiàn)在頭腦里面有兩種做法，但總覺得不夠好：無論是搜索結(jié)果還是原始的列表結(jié)果，都使用同一個組件渲染，在 vm 中定義這三個概念：data.rawList : 用于記錄圖書列表data.searchList : 用于記錄搜索的結(jié)果列表computed.displayList : 用于真實顯示在組件上的數(shù)據(jù)列表(根據(jù)是否正在搜索判斷使用上面哪一項數(shù)據(jù))將搜索結(jié)果和原始的列表用兩個組件分開渲染，使用 v-if 來判斷顯示哪一個列表。所以想請教一下大家，怎么樣做才更加合適？
1 回答
瀟瀟雨雨
TA貢獻(xiàn)1833條經(jīng)驗 獲得超4個贊
1、首先要確認(rèn)獲取的數(shù)據(jù)量的大小，如果數(shù)據(jù)量大，那么獲取數(shù)據(jù)的時間就變長，這對用戶體驗并不好。因此，如果數(shù)據(jù)量小可以直接用一次請求完成，但數(shù)據(jù)量大的時候，還是交給服務(wù)器處理，按需獲取吧。
2、關(guān)于搜索，如果是一次請求獲取所有數(shù)據(jù)，可以通過v-model綁定搜索框，對數(shù)據(jù)進(jìn)行filter篩選，并不需要另外分開組件。如果分開組件，那么就有點重復(fù)工作的意思了，反正都是對原數(shù)據(jù)進(jìn)行篩選的。
2.1、如果是交給服務(wù)器處理，那么只需要請求數(shù)據(jù)就好（分頁、搜索功能），如果數(shù)據(jù)庫里數(shù)據(jù)量大的時候推薦這樣做，性能優(yōu)化交給服務(wù)器就好，前端做不了太多優(yōu)化的。
3、如果覺得還是一次請求數(shù)據(jù)，那么可以延時請求，先請求小量數(shù)據(jù)的用于展示，再setTimeout把整個數(shù)據(jù)下載下來。
總結(jié)：不建議把搜索和默認(rèn)顯示分開，因為都是對原始數(shù)據(jù)進(jìn)行篩選。
添加回答
舉報
0/150
提交
取消