Vue 3 中定时器需在 beforeUnmount 钩子中清除，用 ref 存储 timer ID 并置 null；keep-alive 场景改用 onActivated/onDeactivated；推荐封装为 useInterval 自定义 Hook 统一管理。
在 Vue 3 中，必须在组件卸载前、响应式系统仍有效时清除定时器，否则回调可能访问已销毁的 ref 或 computed，引发 Cannot read property 'xxx' of null 报错，或持续占用内存造成泄漏。核心是用 ref 存储 timer ID，并在 beforeUnmount 钩子中清理。
标准写法：ref + beforeUnmount
这是最基础也最可靠的模式，适用于普通路由跳转、v-if 移除等非缓存场景：
- 用
ref(null)声明定时器引用，确保它可在整个 setup 作用域中被访问 - 在
onMounted或业务逻辑中启动定时器，并赋值给该 ref - 在
beforeUnmount中检查并调用clearInterval或clearTimeout（多次调用安全，无需判空也可）
示例：
<script setup><br> import { ref, onMounted, beforeUnmount } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br> const timer = ref(null)<br> <br> onMounted(() => {<br> timer.value = setInterval(() => {<br> console.log('tick')<br> }, 2000)<br> })<br> <br> beforeUnmount(() => {<br> if (timer.value) {<br> clearInterval(timer.value)<br> timer.value = null<br> }<br> })<br> </script>keep-alive 场景：用 activated / deactivated
当组件被 beforeUnmount 不会触发（组件未销毁，只是失活）。此时需改用 onActivated 和 onDeactivated：
python-flask-vue-creator
下载
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
-
onActivated：检查timer.value是否为空，为空才启动新定时器（防重复创建） -
onDeactivated：立即清除定时器并置空 - 若组件可能以两种方式使用（如同时用于路由和 tab 缓存），建议
onDeactivated和beforeUnmount双钩子都写清理逻辑，不冲突且更稳妥
进阶方案：封装成自定义 Hook
项目中定时器多处复用时，推荐抽离为 useInterval 这类 Hook：
- 内部用 ref 管理 timer，自动绑定
beforeUnmount清理 - 支持传入回调、间隔时间、是否立即执行等参数
- 返回
pause、resume、clear方法，业务层无需关心生命周期时机 - 避免漏清、重复创建、ID 覆盖等问题，适合中大型项目长期维护
容易踩坑的细节
很多泄漏不是没清理，而是写法不严谨：
- 用箭头函数或内联函数绑定事件监听器 → 卸载时无法用
removeEventListener解绑（handler 引用不一致） - 反复调用
startTimer但没先清旧 timer → 旧 ID 被覆盖，无法清除 - 在
unmounted（而非beforeUnmount）中清理 → 此时响应式变量可能已失活，this或ref访问会失败 - 把 timer ID 存在闭包变量或全局变量里 →
beforeUnmount无法访问，清理失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
