VueJS禁用特定属性的反应性

Question

我将此地理库与诸如Map，Layer和LayerTree之类的对象一起使用。我正在使用Vue可视化LayerTree。

但是，今天我注意到有些层包含很多（超过10,000个）项目，这些项目全部变为反应性，这完全爆炸了内存使用情况。我不需要这样做，因为我只对显示图层树的图层的一些属性感兴趣。

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

Answer 1

在data方法返回的内容之外定义的任何内容都是非反应性的。指南中没有官方提供此功能，但到目前为止，它仍然有效。

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

Answer 2

我遇到了同样的问题。当将VueJ与另一个包含大对象的库-> BabylonJs（3D渲染引擎）一起使用时，我注意到性能显着下降。在较大的流体物体上注入反应性吸气剂和吸气剂巴比伦3D对象造成明显的膨胀，并导致FPS的性能下降。

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

由于上述原因，我从vue中创建了一个名为vue-for-babylonians的fork。检出here。

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