vue中结合vue-cesium路由跳转使内存和gpu增加问题解决

vue-cesium路由跳转结果内存和gpu一直增大

开始项目中打算每个页面都有一个单独的地球实例，但是随着vue-router页面的跳转，地球的destroy也没有把内存释放，gpu也越来越高，苦思想了很久，也没有出啥。后来查资料说是cesium的内存机制有问题，所以没办法只有多个页面共享一个地球了。好吧废话不多说开始代码。

Home页面放置

<div id="viewerCon">
        <cesium-viewer></cesium-viewer>
</div>

其中cesium-viewer是注册的地球组件，id为viewerCon的div作为存放组件的容器。

其他页面放置

<div class="map-c" id="xhMainCon" ref="parent"></div>

<script>
export default {
  name: "xhmain",
  data() {
    return {
    }
  },
  mounted() {
    this.setCesium();
  },
  created() {},
  beforeDestroy() {
    this.destoryCesium();
  },
  methods: {
    setCesium() {
      //获取到3d的盒子
      var cesium= document.getElementById("cesium");
      var viewerCon = document.getElementById("viewerCon");
      //3d在页面中的样式，可根据自己的需求进行调整
      cesium.style.display = "block";
      viewerCon.removeChild(cesium);
      // //在本页面中的制定位置进行挂载
      document.getElementById("xhMainCon").appendChild(cesium);
    },
    destoryCesium() {
      var parent = this.$refs.parent;
      var cesium= parent.firstChild;

      //隐藏
      cesium.style.display = "none";
      //从当前页面中移除
      parent.removeChild(cesium);
      //重新挂载回body
      var viewerCon = document.getElementById("viewerCon");
      viewerCon.appendChild(cesium);
    }
  }
};
</script>

这样每个页面都可以存放一个地球了，而且不会随着路由跳转而使内存和gpu提升。
还有一个问题是，开始我在钩子beforeDestroy中用的是
var parent = document.getElementById(“xhMainCon”)
而不是 var parent = this.$refs.parent，
但是怎么都获取不到元素，后来打印了document才发现打印的document是页面即将跳转的document，获取的id在打印的document中不存在。
在解决问题的过程中，还是要多打印当前所要操作的元素，这样才不会浪费时间。