阻止 vue.js 重新呈现数据?
Prevent vue.js from re-rendering data?
我有一个 Vue 组件,它有一个名为 data
的 prop
。此数据道具从后端查询接收前 25 个结果。
最终我们可能想要获取约 250 个结果,其余结果将通过偏移量为 25 的 AJAX 调用获取。
这样用户至少可以直接查看前 25 个结果,我们有一个静态生成的后端页面,其中包含 25 个结果以确保正确的 SEO。
前 25 个结果正在 Vuex 存储中设置,当 AJAX 调用完成后,我想将剩余 225 个结果的 AJAX 数据与已经存在的 25 个结果合并。
我面临的问题是,当我使用 v-for
呈现结果时,整个列表在我合并数据时重新呈现,即使前 25 个结果保持顺序并且最后结果看起来一样。
有什么方法可以防止在合并数据时发生这种重新渲染?
编辑
我使用 lodash merge
尝试合并我的值似乎做了一些完全不同于简单地使用适合我的情况的 concat
的事情。
在连接的情况下,似乎没有重新渲染。
已通过使用 unshift 和 push 在需要时预先添加和附加进行修复:
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 组件,它有一个名为 data
的 prop
。此数据道具从后端查询接收前 25 个结果。
最终我们可能想要获取约 250 个结果,其余结果将通过偏移量为 25 的 AJAX 调用获取。
这样用户至少可以直接查看前 25 个结果,我们有一个静态生成的后端页面,其中包含 25 个结果以确保正确的 SEO。
前 25 个结果正在 Vuex 存储中设置,当 AJAX 调用完成后,我想将剩余 225 个结果的 AJAX 数据与已经存在的 25 个结果合并。
我面临的问题是,当我使用 v-for
呈现结果时,整个列表在我合并数据时重新呈现,即使前 25 个结果保持顺序并且最后结果看起来一样。
有什么方法可以防止在合并数据时发生这种重新渲染?
编辑
我使用 lodash merge
尝试合并我的值似乎做了一些完全不同于简单地使用适合我的情况的 concat
的事情。
在连接的情况下,似乎没有重新渲染。
已通过使用 unshift 和 push 在需要时预先添加和附加进行修复:
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
就不会重新渲染