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中不存在。
在解決問題的過程中，還是要多打印當前所要操作的元素，這樣纔不會浪費時間。