局部变量与数据。性能的巨大损失-解网

问：

我有一个 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 则很糟糕。我已经删除了其余的源代码，只是尝试仅使用上述源代码渲染铯世界，这种情况仍然发生 - 这就是为什么我相信这是我整个问题的根源。但我不明白为什么this.viewer会引起如此巨大的性能打击。我能做些什么来解决这个问题？

编辑#1：

这是一个结合了 Vue 和 Cesium 的沙盒： https://codesandbox.io/s/peaceful-satoshi-1mog9

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

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

javascript vue.js 这个 cesiumjs 范围

@Anatoly这可能是一个愚蠢的问题，但是有没有办法防止这种情况发生在特定物体上？我的意思是，Vue 的全部意义在于创建响应式对象，这样我就可以在其他组件中的其他地方修改它们。因此，这将破坏我最初拥有 Vue 的目的。我想这里发生的事情是，查看器对象不断被监视并触发对查看器属性的更新;无论用户输入如何。因此，当我使用 vs 时，速度会大大减慢。this.viewer = new Viewer("cesiumContainer")let viewer = new Viewer("cesiumContainer")

答：

0赞 whendon 4/13/2022 #1

来自阿纳托利的评论：在数据部分中分配给一个道具会自动使你的对象及其所有道具成为反应性，如果这些道具频繁地改变它们的值，这可能会影响性能。

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

它看起来像这样：

var myCesiumObj = null

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

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

上一个：在 Monaco Editor for javascript 上设置“this”上下文

下一个：在打字稿中分离的文件中实现方法类

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

Local variable vs data. Huge loss in performance

评论