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 就不会再新增了。

相关推荐
lyj16899719 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景5 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘5 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)6 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中6 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi7 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X7 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come112348 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
海天胜景10 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui