为什么 beforeDestroyed 函数不起作用？

Question

我有一个在 mounted() 挂钩中调用的方法，它使用 setInterval 设置时间间隔，如下所示：

methods: {
  clock() {     
    const date = new Date()

    const hours = ((date.getHours() + 11) % 12 + 1);
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    const hour = hours * 30;
    const minute = minutes * 6;
    const second = seconds * 6;
}},

mounted: function() {
  setInterval(this.clock, 1000);
},

beforeDestroyedhook中还有一个清除区间的函数。 console.log 输出“workBefore”，所以我知道，它进入了函数内部，但是间隔没有被清除。下面是函数：

beforeDestroyed: function() {
  console.log("workBefore")
    clearInterval(this.clock);
  }

感谢任何帮助!!!

Answer 1

setInterval returns一个区间，用来清除区间，也就是说需要把setInterval返回的值存入一个变量中，同样定义变量在data 对象，以便在组件中的任何位置都可以访问它。

this.interval = setInterval(this.clock, 1000);

然后，用this.interval清除beforeDestroy中的区间。

clearInterval(this.interval);

Answer 2

下面的答案不需要你有 beforeDestroy 钩子，如果你在里面做的只是清除间隔。

mounted() {
  const interval = setInterval(this.clock, 1000);
    this.$once('hook:beforeDestroy', () => {
       clearInterval(interval);
    })

},

为什么 beforeDestroyed 函数不起作用？

Why is beforeDestroyed function not working?

javascript

lifecycle

vue.js