Vue.js合并数据而不重新渲染？

Question

我有一个search组件，它将表单中的数据作为PHP json_encoded数据的支柱获取：

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

这样，当页面呈现时，它会立即收到前25部电影。

在此之后，如果电影超过25部，我会发出ajax请求以获取结果的其余部分。

问题是当我用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，我可以阻止重新渲染。

Answer 1

请记住，您的viewmodel是您视图的模型。在这里，您没有为应用程序建模，而只是尝试插入数据。

如果您想一次显示一页结果，请为结果页面提供某种模型。获取数据时，请将其放入相应的模型页面中。由于您一次只显示一个页面，因此填充其他页面不会导致重新渲染。