Vue2解决cesium动画卡顿

我这里说的动画卡顿的原因是有过多的entity，导致加载非常缓慢且出现卡帧情况。

方法一：使用call方法，避免vue对实体进行监控。

首先我使用了vue3的代码，其中的代码片段是：

onMounted(() => {
    xxx    // 里面加载了很多entity
}

这种方式进行加载我发现不存在卡顿的情况。原因是vue3中响应式数据需要使用ref或者reactive，所以不存在卡顿的情况。

而刚开始我在vue2中的代码片段为：

methods: {
    ShowFly(){
        xxx    // 里面加载了很多entity
    }
}

这只是一个子组件中的一个方法，其将由其父组件通过$refs进行使用。

在这我陷入了一个误区，我开始尝试将ShowFly方法中添加实体的代码的this变成undefined。于是我将ShowFly的调用改成了一个箭头函数，其实这在vue2中是很不推荐的做法。

改正之后发现确实添加实体代码的this变成了undefined，但是依旧避免不了卡顿。

发现这个ShowFly方法的调用过程中出现了父组件的this，于是我将子组件的代码改变成了：

// 方法一  
mounted() {
    this.ShowFly.call(window)    // 这个就是解决的代码，等同于this.ShowFly.call()
  },

  methods: {
    ShowFly(){
        xxx
    }
}

此时也不需要父组件使用$refs了。虽然添加实体的方法中的this依旧指向组件实例对象，但是卡顿问题已经完美解决了。初步估计的是此时vue实例已经不会再对entity进行监听，才解决了问题。

方法二：利用$符号规避vue的自动监听。

将Vue组件中的对象全部换成$开头即可。我这里是因为进行分屏处理(详见我的另外一篇博客：Cesium实现分屏联动_cesium的分屏-优快云博客，所以我要让vue帮我管理左右两个viewer对象，方便我进行事件的联动。如果不这样做，加载这个分屏页面再切回动画页面时一样会出现卡顿的情况。

  data() {
    return {
      // 左屏幕
      $leftViewer: {},
      // 右屏幕
      $rightViewer: {},
      // 屏幕的监听事件
      $Handler:{},

    };
  },

如果有不对的地方，欢迎指正！

下面附上卡顿的效果和解决完后的效果：

卡顿：帧率大概在5FPS左右，效果很差。

不卡顿：帧率在55-60FPS之间，无明显卡顿现象。