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()
    }
  }
}

外部監聽生命周期函數

<template>
  <!--通過@hook:updated監聽組件的updated生命鈎子函數-->
  <!--組件的所有生命周期鈎子都可以通過@hook:鈎子函數名 來監聽觸發-->
  <custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {
  components: {
    CustomSelect
  },
  methods: {
    $_handleSelectUpdated() {
      console.log('custom-select組件的updated鈎子函數被觸發')
    }
  }
}
</script>