VueJS禁用特定属性的反应性

Question

我正在使用这个地理库和一些对象，比如Map、Layer和LayerTree。我正在使用Vue来可视化LayerTree。

然而，今天我注意到一些层包含了很多(超过10,000)项，它们都变成了反应性的，这完全爆炸了内存使用量。我不需要这样做，因为我只对显示layerTree的层的几个属性感兴趣。

是否可以将某些属性声明为非反应性？

Answer 1

在data方法返回的内容之外定义的任何内容都是非反应性的。在指南中没有关于这一点的官方信息，但到目前为止，它是有效的。

...,
data() {
    // Nonreactive
    this.fuu = 'nonreactive'
    // Reactive
    return {
       bar: 'reactive',
    }
},
...

Answer 2

我遇到了同样的问题。我注意到当使用VueJs和另一个带有笨重对象的库-> BabylonJs (3D渲染引擎)时，性能会有相当大的下降。在大型和流体对象上注入反应性吸气剂和凝固剂，例如巴比伦3D对象，会产生明显的膨胀，并导致FPS性能受到影响。

在实践中，您可能不需要大型对象是反应性的。Vue应该只用于在DOM上呈现内容。

由于上述原因，我创建了一个vue的叉子，称为vue- For -babylonians。请查看here。

使用它，您可以告诉Vue不要使存储在vue或vuex中的任何对象成为反应性对象。您还可以告诉Vue使对象属性的某些子集具有响应性。您会发现性能有了很大的提高，并且您可以像在vue中一样享受存储和传递大对象的便利。

Answer 3

你也可以用Object.freeze冻结对象，它不会变成反应性的