Vue3+Vite 07：生命周期钩子

一、什么是生命周期Vue 组件就像人的生命周期有「创建→挂载→更新→销毁」四个核心阶段。每个阶段的前后Vue 都提供了对应的钩子函数我们可以把需要在特定时机执行的代码写在里面。组合式 API 的核心特点Vue3 组合式 API 中所有生命周期钩子都以on开头需要从vue中导入后使用。重要说明组合式 API 没有beforeCreate和created钩子setup函数本身的执行时机就等价于这两个钩子初始化代码直接写在setup里即可。二、核心生命周期钩子1. onMounted组件挂载完成执行时机组件第一次渲染到页面DOM 元素全部生成完成后执行整个生命周期只执行一次。核心业务场景发送网络请求获取页面数据获取 DOM 元素操作 DOM初始化第三方插件图表、地图等绑定全局事件监听template div p refpRef我是页面段落/p p计数{{ count }}/p /div /template script setup import { ref, onMounted } from vue const count ref(0) const pRef ref(null) // 用于获取DOM元素 // setup阶段DOM还未渲染 console.log(setup执行获取DOM结果, pRef.value) // 打印 null onMounted(() { // 挂载完成DOM已渲染可以正常获取和操作 console.log(onMounted执行获取DOM结果, pRef.value) console.log(组件挂载完成可以发请求、初始化插件) }) /script打开控制台可以看到setup 里拿不到 DOMonMounted 里可以正常获取这是最经典的使用区别。2. onUpdated组件更新完成执行时机组件的响应式数据发生变化页面重新渲染完成后执行数据每次变化都会触发。核心业务场景数据更新后操作最新的 DOM 元素监听数据变化后的 DOM 状态template div p计数{{ count }}/p button clickcount计数1/button /div /template script setup import { ref, onUpdated } from vue const count ref(0) onUpdated(() { console.log(组件更新完成最新count值, count.value) }) /script点击按钮修改数据控制台每次都会打印更新后的数值。3. onUnmounted组件卸载完成执行时机组件被销毁、从页面中移除时执行整个生命周期只执行一次。核心业务场景清理定时器、延时器解绑全局事件监听取消未完成的网络请求销毁第三方插件实例template div p组件运行中.../p /div /template script setup import { onUnmounted } from vue // 创建定时器每秒打印一次 const timer setInterval(() { console.log(定时器运行中) }, 1000) // 组件卸载时清理定时器 onUnmounted(() { clearInterval(timer) console.log(组件已卸载定时器已清理) }) /script三、完整生命周期执行顺序除了三个核心钩子还有三个前置钩子对应每个阶段执行前的时机。阶段钩子函数执行时机使用频率初始化setup组件创建前DOM 未生成最高所有代码都在这里挂载前onBeforeMountDOM 即将渲染还未生成低挂载完成onMountedDOM 渲染完成极高更新前onBeforeUpdate数据变化DOM 即将更新低更新完成onUpdated数据变化DOM 更新完成中卸载前onBeforeUnmount组件即将销毁低卸载完成onUnmounted组件已销毁高template div p计数{{ count }}/p button clickcount触发更新/button /div /template script setup import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from vue const count ref(0) console.log(1. setup 执行) onBeforeMount(() { console.log(2. onBeforeMount挂载前DOM未生成) }) onMounted(() { console.log(3. onMounted挂载完成DOM已生成) }) onBeforeUpdate(() { console.log(4. onBeforeUpdate更新前DOM即将更新) }) onUpdated(() { console.log(5. onUpdated更新完成DOM已更新) }) onBeforeUnmount(() { console.log(6. onBeforeUnmount卸载前组件即将销毁) }) onUnmounted(() { console.log(7. onUnmounted卸载完成组件已销毁) }) /script四、本篇核心总结生命周期组件从创建到销毁的四个阶段每个阶段对应专属钩子函数三大核心钩子onMounted挂载完成用于发请求、获取 DOM、初始化插件onUpdated更新完成用于操作更新后的 DOMonUnmounted卸载完成用于清理资源、防止内存泄漏执行顺序setup → 挂载 → 更新 → 销毁每个阶段分「前」和「完成」两个钩子