在 vue 中使用 window.onresize

项目场景： 如何在 vue 中使用 window.onresize如何避免 覆盖其它的 window.onresizeecharts 监听图表容器的大小并改变图表大小

---

解决方案：

<script>
/* echarts 监听图表容器的大小并改变图表大小 */
export default {
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.canvas)

    // 监听 window.onresize
    window.addEventListener('resize', this.resize, false)
  },

  // 注销 window.onresize
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    resize() {
      this.myChart.resize()
    }
  }
}
script>

---

常见的错误代码 1

<script>
export default {
  mounted() {
    // 窗口自适应，关键代码
    window.onresize = () => {
      this.$refs.chart1.resize()
    }
  },

  // 注销window.onresize事件
  destroyed() {
    window.onresize = null
  }
}
script>

错误分析 会覆盖其它的 window.onresize,导致页面中只有一个window.onresize生效.不要在destroyed中注销,容易引起不必要的麻烦.请使用beforeDestroy

<script>
  export default {
     beforeDestroy() {
      // 输出结果: {canvas: div.canvas}
      console.log('beforeDestroy', this.$refs)
    },
    destroyed() {
      // 输出结果: {canvas: div.undefined}
      console.log('destroyed', this.$refs)
    }
  }
</script>

---

常见的错误代码 2

<script>
  window.addEventListener('resize', this.resize(), false)
script>

抄作业都没抄明白的代码
window.addEventListener 第二个参数接收了this.resize()执行结果，而不是一个function

---

常见的错误代码 3

<script>
  window.addEventListener('resize', () => {
      this.resize()
  })
script>

匿名函数你怎么销毁?