如何在 Vue.js 中高效处理大型数据集？

Question

我必须使用 Vue.js、D3 和 JS 设计和实现一个仅在浏览器中运行的可视化仪表板。数据集是一个 .json 文件，大小为 48 MB。当我使用 d3.json() 解析文件时，谷歌浏览器的任务管理器向我显示 Javascript 代码使用了大约 450 MB 的内存。我希望能够有效地更新可视化仪表板上的不同图表，这在我将数据对象保存在内存中时是可能的。

这是我目前加载数据的方式。然后我可以在 Vuex store 的状态下访问它。

actions: {
    loadData(state) {
      d3.json('filename.json').then((data) => {
        state.data = data;
      })
    },
}

您有什么建议/常用方法可以减少内存使用量吗？一个明显的方法是每次我需要访问数据时重新解析 .json 文件，但这会增加计算时间。

Answer 1

（更新）

我的一位同事找到了解决问题的方法，我想与您分享：

当解析的数据对象保存在 Vuex 存储的状态中时，Vue 会使其成为反应式，这样 Vue 组件可以在 Vuex 存储的状态发生变化时进行反应式更新。

这可以避免

Object.freeze(data);
state.data = data;

这使得数据对象无反应。由此带来的性能提升和内存使用量的减少是显着的。

在我的情况下，RAM 使用量从大约 450 MB 减少到 50MB，而将数据集加载到 Vuex 存储的状态大约需要 3 秒。而不是大约 25 秒。