生命周期钩子

# 题目:

看到这个题，点击这个切换子组件的按钮，销毁 Child 组件之后，我们再次去点击会发现这个时候 count 还是一直往上累加的，那么这到底是为什么呢？

onMounted(() => {
  timer.value = window.setInterval(() => {
    count.value++;
  }, 1000);
});

<template>
  <div>
    <Child v-if="visible" />
    <p>
      <button @click="toggle">Toggle Child Component</button>
    </p>
  </div>
</template>

可以看到上面就是 count 递增的核心语法，那么再来分析，点击切换子组件的时候，由于用 v-if 指令控制，组件已经销毁了，再渲染的时候不是从上次销毁的数字继续，而是更大的数字，这表明组件销毁后，count 仍然在增加，这显然不是我们要的一个效果。

# 分析:

onMounted

让我们来看到 vue 官方文档的生命周期一节，onMounted 表示组件挂载完之后执行，看到里面的逻辑，window.setInterval，这个方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。那么这里的问题就是我们什么时候执行 clearInterval() 来停止 setInterval 的执行的问题。

onUnmounted

# 解决:

点击切换按钮后，子组件销毁，那么也就会触发 onUnmounted 事件，尝试把停止时间的逻辑放到这里看看。

onUnmounted(() => {
  window.clearInterval(timer.value);
});

再次切换按钮运行，发现是可行的，在销毁期间 count 就不会再新增了

下一次Dom更新→