Question

我有一个数据库表，每10秒就会在其中插入新记录。

使用vue和axios，我正在HTML表中向用户显示最新的20条记录。

在创建的挂钩上，我介绍了一种每5秒获取一次数据的方法

 window.setInterval(() => {
            this.getRecentTrades()
          }, 5000)

下面是我的表格行代码：

<tr v-for="recenttrade in recenttrades" :key='recenttrade.id' v-bind:class="recenttrade.side=='Buy' ? 'text-success' : 'text-danger'">
    <td>{{ recenttrade.price }} </td>
    <td>{{ recenttrade.size }} </td>
    <td>{{ recenttrade.timestamp }} </td>
    <td>{{ recenttrade.side }} </td>
</tr>

如何将旧记录与新记录进行比较，而仅将新记录追加到HTML表中？

Answer 1

基于https://vuejs.org/v2/guide/list.html部分替换数组，看来最好的解决方案是简单地用api中的一个重新分配本地值。 Vue将自动使用其更改检测并仅重新呈现不属于上一个更新周期中表的项目。

Answer 2

您可以实现一个函数来获取两个数组之间的差异

function arrayDiff(a, b, key) {
    return [
        ...a.filter(x => !b.map(i => i[key]).includes(x[key])),
        ...b.filter(x => !a.map(i => i[key]).includes(x[key]))
    ];
}

并在您的getRecentTrades函数中尝试类似的操作

getRecentTrades(){

    let that = this;     
    apiCall.then(data => {
       let diff = arrayDiff(that.recenttrades, data, 'id');
       that.recenttrades.push(...diff);
    })

}

我认为您需要找到一种更好的方法来执行此操作，因为根据您沿时获取的记录数，您可能会遇到性能问题。

Answer 3

您每次调用getRecentTrades()时都可以替换数据。由于您将要添加到列表中，因此仅需要渲染新项目。

编辑：下面的注释是正确的，基于:key绑定，Vue不需要重新渲染已经存在的列表项。这使得仅替换数据的解决方案就更好了，因为它只会反正呈现新内容。

仅将新记录追加到表Vue JS

3 个答案: