监听任一dom元素尺寸变化

• 前言

• 在开发过程中，遇到echarts的画布会变成100px * 100px的情况，虽然在echarts封装中已经监听window的resize事件，但是画布在来回切换，并且窗口尺寸改变后就出现该情况。
• 在后续的开发中，需要改变页面布局，使chart随父盒子放大，同样无法响应。

切换后：

chart是开放了resize接口的，而切换的时候，页面还没渲染完成，echarts获取不到的真实宽高，所以使用默认值100px

方案一：利用$nextTick()，在父盒子完成渲染后，在绘制chart

方案二：使用新API，resizeObserver 可以监听任一dom节点的尺寸变化

const resizeObserver = new ResizeObserver((entries) => {
      // console.log('entries: ', entries)
      this.$chart.resize()
    })
// 绑定需要监听的节点
resizeObserver.observe(this.$refs.chart)
// 取消resizeObserver
this.$once('hook:beforeDestroy', () => {
  resizeObserver.disconnect()
})

可以在echart组件中直接使用，在mounted中加入观察。

参考：完美监听一个div尺寸的改变(不论何种方式导致的尺寸变化)