Vue实战技巧 ，hookEvent`,原来可以这样监听组件生命周期

hookEvent`,原来可以这样监听组件生命周期

1. 内部监听生命周期函数
今天产品经理又给我甩过来一个需求，需要开发一个图表，拿到需求，瞄了一眼，然后我就去echarts官网复制示例代码了，复制完改了改差不多了，改完代码长这样

<template>
  <div class="echarts"></div>
</template>
<script>
export default {
  mounted() {
    this.chart = echarts.init(this.$el)
    // 请求数据，赋值数据 等等一系列操作...
    // 监听窗口发生变化，resize组件
    window.addEventListener('resize', this.$_handleResizeChart)
  },
  updated() {
    // 干了一堆活
  },
  created() {
    // 干了一堆活
  },
  beforeDestroy() {
    // 组件销毁时，销毁监听事件
    window.removeEventListener('resize', this.$_handleResizeChart)
  },
  methods: {
    $_handleResizeChart() {
      this.chart.resize()
    },
    // 其他一堆方法
  }
}
</script>

功能写完开开心心的提测了，测试没啥问题，产品经理表示做的很棒。然而code review时候，技术大佬说了，这样有问题。
大佬：这样写不是很好，应该将监听resize事件与销毁resize事件放到一起，现在两段代码分开而且相隔几百行代码，可读性比较差

我：那我把两个生命周期钩子函数位置换一下，放到一起? 大佬： hook听过没？ 我：Vue3.0才有啊，咋，咱要升级Vue?
复制代码 然后技术大佬就不理我了,并向我扔过来一段代码

export default {
  mounted() {
    this.chart = echarts.init(this.$el)
    // 请求数据，赋值数据 等等一系列操作...

    // 监听窗口发生变化，resize组件
    window.addEventListener('resize', this.$_handleResizeChart)
    // 通过hook监听组件销毁钩子函数，并取消监听事件
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.$_handleResizeChart)
    })
  },
  updated() {},
  created() {},
  methods: {
    $_handleResizeChart() {
      // this.chart.resize()
    }
  }
}