javascript - Vue.js破坏在组件内运行的setInterval

在用VUE制作的SPA中，我有一个组件运行递归的setInterval函数(这是一个倒计时)。当我将 View 切换到另一个组件时，我注意到倒计时在后台继续进行，但是我更喜欢破坏setInterval。
我尝试使用具有倒数的全局数据，然后在已破坏的钩子(Hook)上销毁它，但是它不起作用。
这是我的代码:

    data: function () {
        return {
            counters: ""
        }
    }),

   methods: {
     countdown(index, exp) {
        ...
          this.counters = setInterva()
        ...
        },
   },

   destroyed(){
        console.log(this.counters); // returns a progressive integer
        clearInterval(this.counters);
        console.log(this.counters); // returns same integer
        this.counters = 0;
        console.log("destroyed");
    }

但是在控制台中，我得到了:

感谢您的任何建议!

最佳答案

您应该使用beforeDestroy钩子(Hook)而不是destroyed
有关Vue生命周期的引用，请查看https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram