神奇bug合集

这里是引用

1. echarts 实例在销毁时 通过ref 和原生 api 拿到的dom. 竟然有报错的区别！！！

  vue2 echarts组件在销毁时 执行的函数
  // 组件销毁时主动释放eCharts内存空间
  beforeDestroy() {
    
	// 报错
    // const chartsInstance = echarts.getInstanceByDom(
    //   document.getElementById(this.idName)
    // );

    const chartsInstance = echarts.getInstanceByDom(
      this.$refs.chart
    );
    chartsInstance && chartsInstance.dispose();
    window.onresize = null;
  },

2. addEventListener()添加事件监听 原文链接

• 如果function参数传的是匿名函数,没办法用removeEventListener来移除监听
• 如果function参数传的不是匿名函数,可以使用removeEventListener来移除监听

// 伪代码片段

//  防抖函数
	debounce(fn, wait) {
	      var timer = null;
	      return function () {
	        if (timer !== null) {
	          clearTimeout(timer);
	        }
	        timer = setTimeout(fn, wait);
	      };
	},
 // 自适应函数   这里写函数是因为  如果addEventListener 使用的是匿名函数时  无法监听
	resize(myChart) {
		this.debounce(() => {
			myChart.resize("100%", "100%");
		}, 100);
	}

 
  // 添加监听    这里的 myChart 实例是echarts 实例 由上下文 获取
  window.addEventListener("resize", this.resize(myChart));

  // 移除函数  两者都可
  window.removeEventListener("resize",this.resize);	
  window.onresize = null  

  //匿名函数是无法通过	removeEventListener 移除	  也无法通过 window.onresize = null 移除
  // window.addEventListener("resize", ()=>{});	
  // 匿名函数还有一个可能的错误
  // 在其他组件中 主动触发 resize 函数        echarts.resize()执行了 但是无效果，  通过具名函数才能解决 
        // 主动触发 resize 事件
      const myEvent = new Event('resize');
      window.dispatchEvent(myEvent);

3. elementUI teble 组件不能继承 父盒子 flex:1 的宽度
   解决方案：将table 套一层div div的宽高设置为 99% （真的不知道为什么100% 不能继承到）

4. vue 2 手脚架环境

“vue-router”: “^3.2.0”, “vue-router”: “3.2.0”, 两个版本的路由
第一个存在 router.getRoutes(). 第二个不存在

5. border-image 在 safari浏览器中 显示很奇怪