Vue.js合併數據而無需重新渲染？

我有一個search組件中獲取數據的形式作爲PHP json_encoded數據的道具：Vue.js合併數據而無需重新渲染？

<search :data="<?= json_encode($jsonHotels) ?>"></search>

這種方式接收到第25部電影馬上當頁面呈現。

之後，我做了一個ajax請求，以獲取剩餘的結果，如果有超過25部電影。

問題是，當我用AJAX調用的數據重寫數據時，組件重新呈現。

此前爲了解決這個問題，我執行了一個偏移量爲25的ajax請求，以跳過前25部電影，只給我額外的結果。把它推到數組上並不會導致重新渲染，而且這個效果很好。

這是完美的，直到我開始思考：

什麼誰啓動或刷新頁面而他們的頁號2-3-4-5-等人。

我現在不僅要弄亂我的偏移量，而且還必須將數據預先添加到我的數組中，並儘可能使用推式附加數據。

有沒有辦法合併數據而不會導致重新渲染？我想知道是否有其他人每次都遇到問題。

僅通過AJAX請求獲取所有結果需要很長時間，顯然也會導致重新呈現。不提取初始後端數據將意味着人們將從空白頁面或微調開始2-3秒。

編輯：

結束了與此：

mergeData(state) { 
    // Smart merge ajaxData and hotels. 
    const offSet = state.currentPage * state.itemsPerPage; 

    const start = state.ajaxData.slice(0, offSet - state.itemsPerPage); 
    const end = state.ajaxData.slice(offSet); 

    state.data.unshift(...start); 
    state.data.push(...end); 
},

差不多片我在2陣列並取出currentPage部分。通過使用unshift和push我可以防止發生重新渲染。

來源

2017-07-13 Stephan-v

你的數據道具沒有綁定到一個變量，所以你如何覆蓋數據？從搜索組件的內部*還是外部？ –

發生什麼情況會導致完全相同的數據重新呈現問題？ –

我在Vue中有一個過渡組，它在渲染時在我的v-for項目中滑動。與此類似：https：//vuejs.org/v2/guide/transitions.html#List-Move-Transitions所以，當我的ajax內容被加載時，它們會在第二次滑動，這對用戶來說是一種混淆，即使它是相同的數據。 –

請記住，您的viewmodel是您的視圖模型。在這裏，你不是在建模你的應用程序，你只是試圖插入你的數據。

如果你想一次顯示一頁結果，請爲結果頁面提供某種模型。當您獲取數據時，將其放入適當的模型頁面中。由於您一次只顯示一個頁面，因此填充其他頁面不會導致重新渲染。

來源

2017-07-13 12:31:46

這需要我確切知道要更新哪些頁面。我想這是沒有辦法的。假設用戶從第3頁開始，我只需要在第3頁之後推送頁面1,2和頁面。目前，我已經完全像你提到的分頁結果。 –

當您填充頁面時，您遍歷所有頁面並跳過當前頁面。雖然用精確的重複替換當前頁面數據不應導致實際的重新渲染。 –

Vue.js合併數據而無需重新渲染？

回答

相關問題