为何定时器一定要移除?页面销毁之后不会移直接摧毁定时器吗?

作者站长头像
站长
· 阅读数 13

在读Vue3生命周期函数文章的时候,

created:执行这个函数的时候,vue 实例已经初始化了,可以在这里调用数据,不过还没渲染到页面上。 在当前函数中我们可以访问到 data 中的属性,此时,会将 data 中的属性和 methods 的方法添加到 vue 的实例身上,同时会将 data 中所有的属性添加一个 getter/setter 方法。这里可以进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用。有 this props,不能访问 dom(还没有渲染完毕)。常用于自动 ajax 请求、事件监听、定时器开启等。

beforeDestroy:出发这个函数时,还没开始销毁,此时刚刚脱离运行阶段。data,methods,指令之类的都在正常运行。用于移除 dom 事件监听、定时器等。

有2个问题:1.定时器开启/移除,在created,beforeDestroy地方,为何需要这样指出定时器来?1)定时器可以在任意时候做,比如mounted,为何一定指在created这里?2)为何定时器一定要移除?页面销毁之后不会移直接摧毁定时器吗?2.在vue3中为何不能引入onBeforeCreate和onCreated方法?

import { 
  onBeforeCreate,    
  onCreated
} from 'vue'
回复
1个回答
avatar
test
2024-07-17
  1. created 是最早的钩子函数,此时大部分我们需要的东西,比如 data 已经就绪,所以可以在这里开启定时器。当然可以在 mounted里开启,看你喜欢和需求。
  2. 页面销毁,当然定时器就没了。但是 Vue 是 MVVM 框架,大部分时候我们使用的都是组件,界面切换并不重置页面环境,所以需要手动移除,以避免内存泄漏。
  3. vue3 引入了 composition API 和 <script setup>,这两个方法逻辑上被 setup 取代了
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容