vue 生命周期 hook 在实际开发时有什么用？ 下面我列出几个例子

一、Echart 监听图表容器的大小并改变图表大小

在有些场景下，我们希望当 echart 容器大小改变时，图表的大小也相应地改变。

比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。


代码

<template>
  <div ref="echarts"></div>
</template>

<script>

mounted() {
  this.chart = echarts.init(this.$refs.echarts)
  // 监听窗口发生变化，echart图例自适应刷新
  window.addEventListener('resize', this.resize)
}

beforeDestroy() {
  window.removeEventListener('resize', this.resize)
  this.chart.dispose() // 销毁ehcart实例
}

methods: {
  resize() {
    this.chart && this.chart.resize()
  }
}
</script>

这里利用了 destroyed 钩子 去销毁 dom resize 监听事件

还有一种更简洁的写法

<script>

mounted() {
    this.chart = echarts.init(this.$refs.echarts)
    // 监听窗口发生变化，echart图例自适应刷新
    window.addEventListener('resize', this.resize)
    // beforeDestroy remove事件 销毁实例
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.resize)
      this.chart.dispose()
    })
  }

methods: {
  resize() {
    this.chart && this.chart.resize()
  }
}
</script>

这里 beforeDestroy 钩子执行时将触发 'hook:beforeDestroy' 事件

我们可以根据具体业务用$on,$once 去监听所有的生命周期钩子函数。

这里我的业务只需要执行一次，就用的$once。

tips：如果你的业务里 window 的 resize 会高频触发，那么你可以考虑单独监听 dom 的 resize 事件

二. 利用钩子函数销毁定时器

场景：时间显示

在工作中遇到计时器相关的需求得格外小心

打开某些网站，让这个tab在那放半小时后发现页面崩了，啥都点不动了，大概率和计时器任务一直频繁调用有关

每定义一个计时器，就会在计时器线程的队列里面新加入一个排队的计时器。即使这个你跳转到另外一个页面，这个队列仍然存在。等计时器的一到，就会把这个计时器要执行的内容从队列拿出来开始执行。

<template>
  <div v-text="currentTime"></div>
</template>

<script>
  data: function () {
    return {
    	currentTime: moment().format('HH: mm: ss')
    }
  }

  created() {
  	this.startTime()
  }

  methods:{
      startTime(){
        let timer = setInterval(()=>{
         this.currentTime = moment().format('HH: mm: ss')
        },1000);
        // hook优化写法清除定时器
        this.$once('hook:beforeDestroy',()=>{
          clearInterval(timer);
          timer = null;
        })
      }
   }
</script>