前端小白记录Vue踩到的坑。

首先这是公司另一位已经离职同事的代码，然后大屏展示页面是用jq引入了一个地图样式。
进入大屏展示都是没什么问题的，看起来一切都十分完美。
但是！！！！
问题出来了！
当我离开大屏展示页面，调整窗口大小的时候，无数个

Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’；

就来了！

我在网上各种搜索，都说是图片路径问题或者v-show/v-if控制的dom元素隐藏和销毁的区别。
但是重点是，我是用的浏览器自带的后退按钮，哪来的v-show和v-if啊！！
问题的确是返回后，dom元素销毁，调整窗口大小的时候，已经没有那个元素作为canvas的容器了，当然就报错了。以下是问题代码：

  window.addEventListener("resize", function () {
        
            myChart.resize();
        });

是在初始化我地图后写了一个这个方法，初始化地图方法又是在mounted里面调用的。

可是这是在另一个页面写的啊，为什么我到另一个文件了，改变窗口大小还是会调用这个函数呢？
我又想起来主页面代码里用了keep-alive保存状态，难不成是这个原因？
于是我就把keep-alive给删了，这个时候返回destroy也调用了，按理来说没问题了嘛，页面都销毁了。
可是没有！！！！
它依旧报错，我在这个代码里添加了一个console,发现不管在哪个页面都是会监听到这个resize的。
这是为什么呢？
这里斗胆猜测一下：
难不成因为是写在App.vue里面，所以这里写了一个监听窗口变化的函数，这里的window指的是App.vue的window？所以全部的页面都会被监听？
还请各位大佬指导一番。

好了，废话那么久，所以最后解决的办法就是：

在resize监听函数里面，判断获取的dom是否为null，不是null才调用echart的resize方法。

  window.addEventListener("resize", function () {
          var chartcontent = document.querySelector(".map .chart");
          if (chartcontent != null) {
            myChart.resize();
          }
        });

但是总觉得应该有更好的解决办法，比如如何只监听当前页面的窗口大小，或者离开页面后，销毁整个页面，包括函数等。目前没有找到方法。