VueJS 禁用特定属性的反应性答案

【问题标题】：VueJS Disable reactivity for specific propertiesVueJS 禁用特定属性的反应性
【发布时间】：2019-07-21 05:57:09
【问题描述】：

我将这个地理库与 Map、Layer 和 LayerTree 等对象一起使用。我正在使用 Vue 来可视化 LayerTree。

今天我注意到有些层包含很多（超过 10,000 个）项目，这些项目都变成了反应性的，这完全爆炸了内存使用量。我不需要这个，因为我只对图层的几个属性感兴趣以显示 layerTree。

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

【问题讨论】：

你有一个例子来说明树的样子和你如何使用它吗？您不应该将极端复杂（嵌套）的项目存储在数据字段（或 vuex）中，我不知道仅使某些字段具有反应性的可能性。你不能提取你真正感兴趣的数据吗？
See here for some ideas。我真的很喜欢最后的 mixin 答案。

标签： vue.js

【解决方案1】：

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

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

【讨论】：

好的。这太棒了。在试图解决这个问题几天之后，甚至将所有内容重构为 vuex 状态（这并没有降低性能），存储超过 20,000 个图表的数据点显示数据返回或状态存储存在巨大滞后，使用这个简单的技巧解决了我的问题和数据仍然可以在组件中的任何位置访问。

【解决方案2】：

我遇到了同样的问题。当将 VueJs 与另一个具有庞大对象的库 -> BabylonJs（3D 渲染引擎）一起使用时，我注意到性能显着下降。在大型流体对象上注入反应式 getter 和 setter，例如Babylon 3D 对象，造成显着膨胀并导致 FPS 性能下降。

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

由于上述原因，我从 vue 创建了一个名为 vue-for-babylonians 的分支。看看here。

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

【讨论】：

【解决方案3】：

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

【讨论】：