一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

Vue3你真的熟悉吗?02-生命周期钩子

原题传送门

题目:

Vue3你真的熟悉吗?02-生命周期钩子

看到这个题,点击这个切换子组件的按钮,销毁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 仍然在增加,这显然不是我们要的一个效果。

分析:

凡事必有因,别急先让我们来看几个概念。

Vue3你真的熟悉吗?02-生命周期钩子

首先看到vue官方文档的生命周期一节,onMounted 表示组件挂载完之后执行。

Vue3你真的熟悉吗?02-生命周期钩子

Vue3你真的熟悉吗?02-生命周期钩子

再看到MDN文档对setInterval这个方法的介绍,setInterval,在一定的时间间隔内会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID值可用作 clearInterval() 方法的参数。那么这里的问题就是我们通过setInterval创建了一个定时器,却没有执行 clearInterval() 来停止它 。

最后看到我们的题目:

// Child.vue
<script setup lang="ts">
import { onMounted, onUnmounted, inject } from "vue"

const timer = inject("timer")
const count = inject("count")

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


</script>

<template>
  <div>
    <p>
      Child Component: {{ count }}
    </p>
  </div>
</template>
// App.vue
<script setup lang="ts">
import { ref, provide } from "vue"
import Child from "./Child.vue"

const visible = ref(true)
const timer = ref(null)
const count = ref(0)
provide("timer", timer)
provide("count", count)

function toggle() {
  visible.value = !visible.value
}
</script>

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

每次我们点击切换按钮的时候,子组件的onMounted钩子触发,就会在一秒后新建一个定时器,当我们快速点击toggle按钮多次后发现,这个count值增加得更快了,这到底是为什么呢?这是因为子组件反复挂载和销毁,可能会引发计时器的累积问题。每次子组件挂载时,都会创建一个新的计时器并启动,但之前的计时器并没有被清除,这会导致多个定时器并行运行,自然这个count的值也就新增多次也就是更快了。

解决:

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

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

这里就是每次销毁组件的时候,同时销毁创建的定时器,再次切换按钮运行,发现是可行的,在销毁期间 count 就不会再新增了。

原文链接:https://juejin.cn/post/7324528599780065306 作者:Xwenhaha

(0)
上一篇 2024年1月17日 上午10:00
下一篇 2024年1月17日 上午10:10

相关推荐

发表评论

登录后才能评论