VueJS禁用特定属性的反应性

时间:2019-02-27 13:33:25

标签: vue.js

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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

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

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