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

原题传送门

题目:

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

javascript 复制代码
onMounted(() => {
  timer.value = window.setInterval(() => {
    count.value++;
  }, 1000);
});
vue 复制代码
<template>
  <div>
    <Child v-if="visible" />
    <p>
      <button @click="toggle">Toggle Child Component</button>
    </p>
  </div>
</template>

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

分析:

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

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

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

最后看到我们的题目:

javascript 复制代码
// 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>
javascript 复制代码
// 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 事件,尝试把停止时间的逻辑放到这里看看。

javascript 复制代码
onUnmounted(() => {
  window.clearInterval(timer.value);
});

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

相关推荐
江城开朗的豌豆22 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆27 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
试图让你心动11 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏11 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴85013 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L16 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊16 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选17 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ20 小时前
Vue2上
vue.js·npm