防止 vue.js 重新渲染数据？答案

【问题标题】：Prevent vue.js from re-rendering data?防止 vue.js 重新渲染数据？
【发布时间】：2017-11-21 10:25:15
【问题描述】：

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

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

这样用户至少可以立即查看前 25 个结果，并且我们有一个静态生成的包含 25 个结果的后端页面，以确保正确的 SEO。

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

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

当我合并我的数据时，有什么方法可以防止这种重新渲染发生吗？

编辑

我使用 lodash merge 来尝试合并我的价值观，这似乎与仅使用适用于我的情况的 concat 完全不同。

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

【问题讨论】：

那么，现在的问题是什么？你能提供一些代码吗？为什么不使用 arr.push(...newElements) ？ Concat 返回一个 new 数组。
还可以尝试将:key="item.id" 与v-for 一起使用，以便vue 可以识别出新数组包含旧数组中的对象。

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

通过在需要时使用 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 不会重新渲染

【讨论】：