Question

我有一个Vue组件，其prop名为data。此数据道具从后端查询接收前25个结果。

最终我们可能想要获取~250个结果，其余的结果是通过一个偏移量为25的AJAX调用获取的。

这样，用户可以至少立即查看前25个结果，我们有一个静态生成的后端页面，其中包含25个结果，以确保正确的搜索引擎优化。

前25个结果是在Vuex商店中设置的，当AJAX调用完成后，我想将剩下的225个结果的AJAX数据与已经存在的25个结果合并。

我面临的问题是，当我使用v-for渲染结果时，整个列表会在合并数据时重新呈现，即使前25个结果保持有序且最终结果看起来如此相同。

在合并数据时，有没有办法阻止重新渲染？

修改

我使用lodash merge来尝试合并我的值，似乎做了一些完全不同的事情，而不仅仅是使用适用于我的情况的concat。

在concat的情况下似乎没有重新渲染。

Answer 1

通过使用unshift并在需要时推送前置和附加来修复：

const offSet = state.currentPage * state.itemsPerPage;

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

rootState.filters.data.unshift(...start);
rootState.filters.data.push(...end);

这使得数组完好无损，并且可以使用分页。这样，Vue.js

就不会重新渲染

阻止vue.js重新呈现数据？

1 个答案: