具有大量只读（不可变）对象的 VueJS 组件的性能问题答案

【问题标题】：Performance issue for VueJS component with huge number of read-only (immutable) objects具有大量只读（不可变）对象的 VueJS 组件的性能问题
【发布时间】：2020-04-26 14:55:20
【问题描述】：

我正在开发一个基于 VueJS 的带有树形视图的 JSON 查看器 (http://treedoc.org)。树项组件是基于 JSON 文档递归生成的。当 JSON 文档庞大且节点数超过 50k 时。渲染变得非常缓慢（可能需要几分钟）。我使用开发性能工具进行调试，我注意到大部分时间都花在了 VueJS 框架方法上：observe()、observeArray()，以构建属性的反应性依赖关系在树节点中。但是，这些树节点是只读的，一旦解析器生成了这些节点，内容将永远不会改变。在这种情况下，重新定义这些属性并观察它们的变化是没有意义的。如何优化这些组件以避免 VueJS 不必要的构建反应性依赖。即想让这些数据处于反应状态。

【问题讨论】：

如果您需要跳过对数据中对象/数组的观察，请在其上使用Object.freeze()。查看埃文本人的this comment。
有这个库vue-nonreactive 我认为它来自与您面临的问题类似的 Vue 问题。我找不到问题，但回想一下 Evan You 建议可以将非反应性数据存储在 vue 组件之外（即只是一个普通的 JS 对象）。
我向它扔了一个伊斯坦布尔的覆盖文件（50k 行），性能看起来还不错——有些地方有点笨拙，但没有几分钟。你能参考你的测试文件吗？
参考How to set a component non-reactive data in Vue 2 以获得潜在的解决方案。
感谢您的建议，VUE-nonreactive 是一个非常有创意的解决方案，但它依赖于 VUSJS 内部数据结构，以后升级有点冒险。我将其更改为使用 Object.freeze()，效果很好。但是，经过优化后，与原生 JS 相比还是很低的。我用来测试的样本是：maps.sensor.community/data/v2/data.24h.json

标签： performance vue.js vue-component

【解决方案1】：

感谢 cmets 部分提供的建议。我在这里总结了这些选项：

使用 Object.freeze()：这对我有用。它极大地提高了性能。需要注意的是，只能将 whole 对象指示为只读。
使用vue-nonreactive组件，这可以指定某些属性nonreactive。需要注意的是，它通过覆盖 __ob__ 依赖于 Vue 内部数据结构。如果 Vue 改变它的实现，这可能会被打破。
使用vue-static。这看起来不错。但是，我没有尝试过，因为我使用的是Class-Style-Vue-Components。

【讨论】：