局部变量与数据。性能损失巨大

Question

我有一个 VueJS 和 Cesium 项目，它在帧速率下降方面存在性能问题。我知道问题出在哪里，但我不知道为什么或如何解决它。

export default {

    name: "Map",

    components: { ... },

    data: function () {
        return {
            viewer: {}        
        }
    },

    methods: { ... },

    mounted() {

        // 150-200 FPS; but no access to the viewer object outside of this component.
        let viewer = new Viewer('cesiumContainer');

        // 20-30 FPS; but yields me the access I need for other components to utilize.
        this.viewer = new Viewer('cesiumContainer');

        ... rest of my source code ...
    }

我可以将所有需要显示的内容保持在 150-200 FPS 以上，而 20-30 FPS 则非常糟糕。我已经删除了我的其余源代码，只是尝试仅使用上述源代码来渲染 Cesium 世界，但这种情况仍然发生 - 这就是为什么我认为这是我整个问题的根源。但我不明白为什么 this.viewer 会造成如此巨大的性能损失.... 我能做些什么来解决这个问题？

编辑#1：

这是一个包含 Vue 和 Cesium 的沙箱：https : //codesandbox.io/s/peaceful-satoshi-1mog9

使用右上角的搜索功能，转到“亚利桑那州大峡谷国家公园”并使用“Ctrl”和鼠标调整相机角度以查看地形。你应该得到这样的东西（注意低 FPS 和缓慢的响应率）：

但是，如果我做同样的事情使查看器成为本地化变量，则响应率和 FPS 将优越得多：

Answer 1

来自 anatoly 的评论：分配给数据部分中的道具会自动使您的对象及其所有道具具有反应性，如果这些道具频繁更改其值，这可能会影响性能。

为了避免这种情况，请在对象外部创建变量export default {}。

它看起来像这样：

var myCesiumObj = null

export default {
    name: "",
    components: {...},
    mounted: function() {
        myCesiumObj = new Viewer('cesiumContainer');
    },
    data() {
        return {
            /* Do not put it here */
        }
    },
    methods: {...},
}

请注意，您不需要使用来this.访问该变量，它在此组件中的任何位置都可用。