vue组件销毁时一定要清除所有定时器vue里很多人几乎不用beforeDestroy和destroyed两个生命周期。但

vue里很多人几乎不用beforeDestroy和destroyed两个生命周期。但其实很有用。

比如我们项目里很经常会用到定时器，setInterval。如果我们不在组件销毁时清除，这个定时器就还在，一直运行着，虽然vue代码没有提示也没有报错，以前不知道，直到我一次在写react时用到定时器，如果我不清楚react就会发出警告，并提示内存已泄漏。这时才注意到，vue有没有处理这个问题。

代码示例如下：

export default {
  name: 'Basis',
  components: {
  },
  data () {
    return {
      timeinter: null
    }
  },
  mounted () {
    this.time()
  },
  // 销毁实例
  beforeDestroy () {
    // clearInterval(this.timeinter)
    // this.timeinter = null
    console.log('组件销毁了')
  },
  methods: {
    // 定时器
    time () {
      this.timeinter = setInterval(() => {
        console.log('定时器')
      }, 1000)
    }
  }
}

看到了么？组件销毁了定时器还在运行。我们应该在销毁生命周期了销毁掉这个定时器

clearInterval(this.timeinter)
this.timeinter = null