Vue3专题 - 生命周期

大家好我是Java1234_小锋老师最近更新 《一天学会 Vue3 Vite element-plus UI框架 视频教程》专辑感谢大家支持。本课程主要介绍和讲解 Vue3框架Vite构建工具以及element-plus UI框架。Vue3核心知识介绍Vite构建工具使用 以及element-plus UI框架的基础组件配置组件Form 表单组件Data 数据展示组件Navigation导航组件Feedback反馈组件Container布局组件介绍和使用。视频教程课件源码打包下载 链接https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd1234提取码1234具体位置 - 第四阶段富客户端技术里面Vue3专题 - 生命周期组件从创建、挂载到页面、更新再到卸载会经历一系列固定阶段。Vue 在这些节点提供了生命周期钩子方便你在合适的时机执行逻辑请求数据、操作 DOM、清理定时器等。组合式 APIscript setup里用的是onXxx函数选项式 API 里对应的是beforeCreate、mounted等方法名。1. 生命周期一览组合式 API钩子触发时机常见用途onBeforeMount挂载前DOM 尚未生成很少单独用onMounted挂载完成DOM 已就绪请求接口、操作 DOM、启动定时器onBeforeUpdate数据变化导致更新前更新前读取旧 DOMonUpdated更新完成DOM 已刷新依赖最新 DOM 的逻辑onBeforeUnmount卸载前清理定时器、取消监听、中断请求onUnmounted卸载完成收尾清理还有两个和调试相关的钩子onErrorCaptured捕获后代错误、onRenderTracked/onRenderTriggered开发调试用。入门阶段优先掌握onMounted和onBeforeUnmount/onUnmounted。2. 执行顺序记忆口诀挂载看 mounted更新看 updated离开记得清理 unmount。3. 入门 Demo计数 挂载提示下面这个 Demo 展示最常用的两个钩子onMounted组件挂载后打印提示、记录时间onUnmounted组件卸载时清理这里用日志模拟script setup /** * 生命周期入门 Demo * 演示 onMounted / onUnmounted 的基本用法 */ import { ref, onMounted, onUnmounted } from vue const count ref(0) const tip ref(组件尚未挂载) /** 计数加一 */ function add() { count.value } // 挂载完成DOM 已就绪适合初始化 onMounted(() { tip.value 组件已挂载onMounted console.log(onMounted可以安全操作 DOM 或请求数据) }) // 卸载完成做清理工作 onUnmounted(() { console.log(onUnmounted组件已卸载记得清理副作用) }) /script template div h2Vue3 生命周期 Demo/h2 p{{ tip }}/p p当前计数{{ count }}/p button clickadd1/button /div /template要点钩子要在setup同步阶段注册script setup顶层直接写即可onMounted之后才能可靠拿到 DOM发请求、document.querySelector等多放这里组件销毁时一定要清理定时器、事件监听避免内存泄漏运行截图4. 进阶 Demo定时器 正确清理很多副作用定时器、窗口监听必须在卸载时关掉。用onBeforeUnmount或onUnmounted清理script setup /** * 生命周期清理 Demo * 挂载时开启定时器卸载时清除避免内存泄漏 */ import { ref, onMounted, onBeforeUnmount } from vue const now ref() let timer null /** 把当前时间格式化为 2026-11-02 17:25:17 这种样式 */ function formatDateTime(date) { const pad (n) String(n).padStart(2, 0) return ( ${date.getFullYear()}-${pad(date.getMonth() 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())} ) } onMounted(() { now.value formatDateTime(new Date()) // 每秒刷新一次时间 timer setInterval(() { now.value formatDateTime(new Date()) }, 1000) }) // 卸载前清除定时器 onBeforeUnmount(() { if (timer) { clearInterval(timer) timer null } }) /script template div h2当前时间/h2 p{{ now }}/p p离开页面时会自动清除定时器/p /div /template运行截图