Vue生命周期全解：从创建到销毁，一张图掌握八个钩子-北京尧图网络

1. 生命周期到底是什么为什么你必须懂接触 Vue 的人不管你是刚看完教程的新手还是已经写过几个后台管理页面的老手最终都会遇到同一个坎代码写对了页面却不在预期时机执行。有人想在页面加载时请求接口于是把请求塞进了created有人想在 DOM 渲染完成后操作节点结果在mounted里拿不到元素还有人想在离开页面前弹个确认框试遍了所有钩子都不知道该用哪个。这些困惑全部集中在一个核心知识点上——Vue 生命周期。说句实话Vue 的入门门槛不算高模板语法、响应式数据、组件通信这些东西抄几遍文档基本能上手。但生命周期是真正的分水岭不理解它的人写出的代码全靠试错今天能用明天可能就崩理解它的人写代码就像装了导航什么时机做什么事一目了然。简单定义一下生命周期指的是 Vue 组件从被创建、渲染、更新到最终销毁的整个过程。Vue 在这个过程的不同阶段分别暴露了一些函数让你可以在指定时机插入自己的逻辑这些函数就是生命周期钩子。这篇文章不会只停留在背八个函数名的层面。我会从底层机制出发讲清楚每个钩子触发时组件到底处于什么状态、能做什么不能做什么然后结合 Vue 3 和 Vue 2 的差异、Composition API 与 Options API 的区别、常见业务场景和真实线上问题把整个生命周期彻底讲透。不管是准备面试、排查 bug还是从零开始做一个正式项目这篇都能直接当参考手册用。2. 一张图看懂 Vue 3 的完整生命周期2.1 八个核心钩子一条执行主线以 Vue 3 为例组件从生到死一共经历四个大阶段露在外面的核心钩子是八个。我先把它们按执行顺序列出来后面再逐个拆解阶段选项式 API 钩子组合式 API 钩子触发时机创建beforeCreate无直接对应实例初始化前数据响应式尚未建立创建created无直接对应实例创建完成响应式数据已可用挂载beforeMountonBeforeMountDOM 尚未挂载模板已编译为渲染函数挂载mountedonMountedDOM 已完成挂载可访问真实元素更新beforeUpdateonBeforeUpdate数据变更DOM 即将重新渲染更新updatedonUpdatedDOM 已完成更新卸载beforeUnmountonBeforeUnmount组件即将卸载实例仍然可用卸载unmountedonUnmounted组件已卸载实例上一切都已销毁这里有个非常关键的背景知识Vue 3 放弃了 Vue 2 的beforeDestroy和destroyed改用beforeUnmount和unmounted。这不只是改名语义上更准确——销毁听起来像实例完全没了但实际过程更像卸载组件、清理副作用。如果你还在维护 Vue 2 的老项目记住两组名字在不同版本中的对应关系就行如果在 Vue 3 项目里写destroyed控制台会直接报钩子不存在而且生命周期全部错乱。2.2 父子组件的执行顺序比你想的更重要生命周期单独一个组件好理解但真实项目里组件是嵌套的。父组件里包着子组件子组件里又包着孙子组件这时候钩子的执行顺序就变得极其关键。我第一次在项目里踩这个坑时想在父组件的created里拿到子组件的数据结果发现子组件还没初始化。调试了大半天最后才意识到Vue 实例化父组件时并不代表所有子组件也跟着实例化了两者之间存在明确的前后顺序。实际执行顺序是这样的父组件beforeCreate→created→beforeMount父组件模板中找到子组件开始创建子组件子组件走完自己的beforeCreate→created→beforeMount→mounted子组件挂载完成后父组件才执行mounted所以父组件的mounted永远在子组件的mounted之后这个顺序称为由内到外挂载。更新阶段则恰恰相反父组件的beforeUpdate先触发子组件随后触发beforeUpdate和updated等子组件全部更新完父组件的updated才执行——由外到内进入更新再由内到外完成更新。卸载阶段父组件先执行beforeUnmount然后子组件依次执行的beforeUnmount和unmounted最后父组件才执行自己的unmounted。记住这个顺序能解决很多诡异问题。比如你在父组件mounted里用this.$refs.child.method()去调子组件的方法一定能调通因为此时子组件早已挂载完毕但如果你在父组件created里去调大概率会报错因为这个时候子组件连created都还没进。3. 创建阶段组件诞生前的黄金时机3.1 beforeCreate 里到底能做什么beforeCreate是在 Vue 实例初始化最开始触发的钩子此时实例刚刚被创建数据观察reactive 响应式系统、事件机制、计算属性、方法都还没有初始化完成。换句话说这个阶段你几乎什么都拿不到访问this.data是undefined调用this.method会报不是函数。有开发经验的人可能会问既然什么都干不了那这个钩子存在的意义是什么答案是极少用于业务但适用于一些特殊场景。比如你想在组件初始化前设置一些非响应式的全局状态、或者在实例上提前挂一个标记位这些不依赖响应式系统的逻辑可以放在这里。实际项目中beforeCreate基本是面试里的理论考点业务代码里很少见到。3.2 created 是所有数据操作的起点created是一个真正能用的钩子。到了这个阶段Vue 已经完成了响应式数据的初始化、methods和计算属性的绑定、props的处理所以你可以访问this.message、this.userList等 data 里的数据调用已经在methods里定义好的方法发起网络请求获取数据对初始化数据进行一些处理和计算有个细节值得注意created阶段虽然 data 已经可用但 DOM 还没有生成this.$el拿不到真实节点模板也没有渲染。所以在这个阶段操作 DOM 纯属白费力气。曾有人问我为什么在created里document.getElementById拿不到元素——原因很简单页面还没渲染。关于在created还是mounted里发请求业界其实有个争论我之前在团队里也和同事反复讨论过。我的实践结论是请求的核心目的是获取数据数据越早拿到越好所以created是发请求最合理的位置。但这不是绝对的如果你的请求需要依赖 DOM 节点的位置、尺寸等信息比如获取某个图表容器的宽度再计算参数那就必须放到mounted。还有一种常见场景是请求参数依赖路由信息这时候你会发现created里通过this.$route拿路由信息已经绰绰有余根本不用等到挂载。3.3 选项式与组合式在创建阶段的差异Vue 3 的 Composition API 有个容易让新手困惑的点它没有beforeCreate和created的对应钩子。在script setup里setup()本身就是一个替代创建阶段的入口。原来写在created里的逻辑直接写在setup顶层代码里就行原来写在beforeCreate里的逻辑同样写在setup里因为setup在创建阶段最先执行此时响应式数据都还没建立。实际写代码的时候很多人会这样处理// 选项式 export default { created() { this.fetchUserList() } } // 组合式 import { ref, onMounted } from vue const userList ref([]) async function fetchUserList() { const res await api.getUserList() userList.value res.data } fetchUserList() // 直接在 setup 顶层调用注意组合式里的顶层代码执行时机相当于原来的created之前、但响应式定义结束之后。如果你把fetchUserList()放在ref定义之前此时userList还没初始化会直接报错。所以组合式代码里响应式变量的定义必须放在使用它的代码之前这是写script setup的基本功。4. 挂载阶段DONT TOUCH THE DOM YET4.1 beforeMount 的短暂窗口beforeMount触发时模板已经被编译成渲染函数但还没有将渲染结果插入到页面 DOM 中。这个阶段你仍然访问不到真正的 DOM 元素this.$el如果非要说有值那也只是 Vue 内部生成的占位符没有任何意义。这个钩子在业务代码里用得极少几乎没有场景必须依赖它。如果非要说一个用途大概是在某些特殊情况下需要在挂载前对渲染数据进行最终微调。但说句实话初学阶段你可以完全忽略它面试时知道它存在的时机即可。4.2 mounted 才是 DOM 操作的主战场mounted是前端开发中最常使用的一个生命周期钩子原因很简单在这个阶段组件对应的真实 DOM 已经渲染完毕你可以放心地获取 DOM 节点修改样式、绑定事件初始化第三方库ECharts、Swiper、Mapbox 等它们大多依赖容器节点执行需要等待元素渲染完成的测量和计算开启定时轮询或建立 WebSocket 连接我在一个可视化大屏项目里就深刻体会到mounted的重要性。那个项目用 ECharts 画地图和柱状图最开始我把初始化图表的代码写在created里结果控制台报容器不存在图表根本渲染不出来。后来改成在mounted里初始化一切顺利。大家都爱用 ECharts但很多人忘了 ECharts 需要拿到 DOM 容器才能初始化而 DOM 容器只有在mounted之后才真实存在。另外要注意mounted只保证当前组件的 DOM 已挂载如果组件里有子组件父组件mounted触发时子组件也都已经挂载完毕但如果你引用了第三方异步组件或用了Suspense情况会更复杂。封装一个等待子组件挂载完成的逻辑要谨慎更多时候直接在子组件的mounted里做自己的事更靠谱。4.3 一个常见的时序坑图片、字体等资源mounted触发时只是 DOM 节点挂上去了不代表图片加载完成、字体加载完成、视频可以播放。曾经有个需求需要在图片加载后测量它的宽高我在mounted里document.querySelector(img).width得到的结果是 0。这是因为mounted触发时 image 标签存在但图片资源还在异步加载中。解决方法是监听图片的load事件或者用nextTicksetTimeout组合。如果你遇到在mounted里做初始化但拿到的尺寸不对的问题先排查是不是资源尚未加载完成再排查是不是用了缓存导致事件未触发。5. 更新阶段响应式数据的连锁反应5.1 beforeUpdate 时发生了什么只要 data 中的数据发生变化Vue 就会进入更新流程。beforeUpdate在数据已经变了、但 DOM 还没重新渲染的节点触发。这个阶段有一个非常微妙的特点你可以拿到最新的 data 数据但页面上的 DOM 还是旧的状态此时适合在 DOM 更新前做一些状态记录、临时逻辑举个具体例子。假设页面上有一个列表用户点击删除按钮后我们需要在列表更新前记录当前滚动条位置或当前选中项。这类在 DOM 即将变化前保存现场的需求用beforeUpdate正合适。但说实话日常业务里直接操作beforeUpdate的频率不高大多数更新逻辑都交给 Vue 的响应式系统自动处理了。5.2 updated更新完成后的检查窗口updated触发时DOM 已经完成了本次更新页面上能看到最新的数据和视图。适合在这个钩子里做以下事情依赖最新 DOM 状态的逻辑比如重新计算某个元素的位置、尺寸某些需要数据更新后重新初始化 DOM 插件的场景但这个钩子也是最容易造成死循环的钩子之一。原因很简单如果你在updated里又修改了 dataVue 检测到数据变化会再次触发更新再次进入updated如果修改数据的逻辑没有终止条件就会无限循环。比如updated() { this.count this.count 1 }这段代码直接让页面卡死。理论上updated里改 data 再触发更新的路径是存在的所以不要在updated里无脑修改数据如果非要改请加上明确的判断条件。我曾经过这样的教训在updated里根据某个筛选条件修改列表的展示数据由于条件判断写得不够严谨导致筛选一次后不断重复更新页面白屏。排查了很久才发现是生命周期数据双绑定的问题。5.3 谨慎使用能不用 updated 就不用我的个人观点是updated是八个钩子里最容易被滥用的一个。很多新人以为页面数据变了我要在updated里做点什么但实际上绝大多数数据变化后需要执行的操作应该用watch监听来替代。两者的区别在于watch是精确监听某个数据的变化变化一次执行一次作用域明确updated是组件内任何数据变化都会触发你不知道这次更新到底是因为哪个变量举个例子你在页面里同时改了name和age两个字段updated会触发一次还是两次取决于 Vue 的渲染调度机制但在这个钩子里你区分不出是谁导致的变化。而watch: { name() {...} }只对name变化做出响应。所以涉及数据驱动逻辑的场景优先用watchupdated只留给真正需要DOM 更新完成后再处理的场景。6. 卸载阶段打扫战场比打胜仗更重要6.1 beforeUnmount 的最后机会当组件即将被移除比如v-if变为 false、路由切换离开页面Vue 会依次触发beforeUnmount和unmounted。在beforeUnmount阶段组件实例仍然是完整的data 还能访问方法还能调用事件监听还在。这个阶段适合做善后工作清掉setInterval、setTimeout定时器解绑第三方库的全局事件、DOM 监听关闭 WebSocket 连接保存草稿、记录用户行为日志这类工作放在beforeUnmount而不是unmounted是因为某些操作还需要用到实例数据。比如你有一个离开页面时保存表单草稿到本地的需求需要在beforeUnmount里读取表单数据并写入localStorage此刻实例还没有销毁取数据是没有问题的。如果放到unmounted很多属性可能已经不能正常访问了Vue 3 中此时 DOM 节点和实例内部链接已被拆除。6.2 unmounted 之后还能做什么unmounted触发时组件的 DOM 节点已经被移除实例的响应式数据连接已经被断开一切跟这个组件相关的运行时资源基本都释放了。此时你还能做一件事最后打印一次日志或清理稍后要用的全局标记除此之外不要在这个钩子里试图访问 DOM 子节点或继续调用依赖响应式数据的方法。很多从 jQuery 时代过来的开发者容易犯一个错在unmounted里调用this.$refs.someChild.someMethod()。组件都卸载了$refs已经没有意义这样调用十有八九报错。6.3 keep-alive 带来的特殊生命周期说到卸载有一个不能忽略的特殊情况keep-alive缓存的组件它的卸载并不是真正的卸载而是进入失活状态。被keep-alive包裹的组件会多出两个钩子activated组件被重新激活缓存后再次进入页面deactivated组件被缓存起来从页面可见变成页面不可见这个场景在移动端列表页 - 详情页 - 返回列表页的流程里极其常见。如果列表页用了keep-alive缓存那么从详情页返回时列表页不会重新走一遍created和mounted而是触发activated。你在created里写的每次进入页面都刷新数据的逻辑不会执行必须把逻辑挪到activated里才有用。我在一个资讯 App 项目里就踩过坑列表页进入详情页再返回发现列表没有刷新新数据。排查后定位到keep-alive缓存导致created不触发。解决方式是使用onActivated钩子来重新拉取数据。这是生命周期知识在实际开发中最有含金量的一类应用之一。7. Composition API 里的钩子写法与注意事项7.1 函数式钩子的注册规则如果用 Vue 3 的script setup写法生命周期钩子必须从vue包里导入再使用。很多人容易写错的地方是钩子名组合式 API 的钩子全都加了on前缀并且首字母大写。import { ref, onMounted, onBeforeUnmount, onActivated, onUnmounted } from vue const timer ref(null) onMounted(() { timer.value setInterval(() { console.log(心跳检测中) }, 1000) }) onBeforeUnmount(() { clearInterval(timer.value) })有几个关键规则要记牢钩子必须在setup执行期间同步注册不能写在异步回调里比如不能等请求返回后再注册每个钩子可以被多次注册执行顺序是自上而下按书写顺序执行同一个逻辑如果涉及多个钩子你可以把代码封装成独立的 composable 函数让复用变得更方便第 2 条很有用。在选项式里一个组件只能有一个created如果你有三个功能模块都得合并到同一个created函数里代码会越来越臃肿。组合式里你可以写三次onMounted每个功能模块各注册各的互不干扰。这就是 Composition API 在组织代码时的核心优势。7.2 setup 里 onMounted 和直接写代码的区别这是新人最容易犯迷糊的地方。script setup顶层写的普通代码执行时机是beforeCreate之后、created之前的阶段也就是实例初始化但响应式刚搭建。而onMounted(() {})内的代码直到组件挂载完成后才会执行。举一个实际例子script setup const userList ref([]) // 顶层代码立即执行 fetchUserList() onMounted(() { console.log(组件挂载完成DOM 可访问) }) /scriptfetchUserList()会直接执行这相当于原来的created时机而onMounted里的内容会延误到 DOM 挂载之后。所以请求接口可以写在顶层操作 DOM 必须放进onMounted不要混为一谈。7.3 响应式引用与生命周期配合的典型范式前面提到我在做 ECharts 图表时遇到容器无法初始化这个问题的最佳实践是script setup import * as echarts from echarts import { ref, onMounted } from vue const chartRef ref(null) let chartInstance null onMounted(() { if (chartRef.value) { chartInstance echarts.init(chartRef.value) chartInstance.setOption({ xAxis: { type: category, data: [Mon, Tue, Wed] }, yAxis: { type: value }, series: [{ type: bar, data: [120, 200, 150] }] }) } }) onBeforeUnmount(() { if (chartInstance) { chartInstance.dispose() chartInstance null } }) /script这里有两个隐藏的技术点。一个是chartRef必须在onMounted里通过chartRef.value拿到真实 DOM因为ref的绑定要到挂载完成后才生效。另一个是 ECharts 实例必须在组件卸载时手动dispose()释放否则会出现内存泄漏。这两个点都用到了生命周期钩子缺一不可。8. 实战场景生命周期钩子搭配使用的经典套路8.1 页面加载数据离开清理每个组件都该有的基本盘不管什么项目最基础、最通用的生命周期套路就是进入页面拿数据离开页面清副作用。setup() { const userList ref([]) let intervalId null // 进入页面立即请求数据 fetchUserList() // 挂载完成后开启定时轮询 onMounted(() { intervalId setInterval(() { refreshList() }, 30000) }) // 离开页面清理定时器 onBeforeUnmount(() { if (intervalId) clearInterval(intervalId) }) }我见过太多项目因为忘记清理setInterval导致内存泄漏切页面越多次卡顿越明显最后整个应用越用越慢。排查这类问题的第一嫌疑对象就是有没有在onBeforeUnmount或unmounted里清理定时器和全局监听。顺便提一个国产项目里常见的问题全局的window.addEventListener(resize, handler)写在mounted里却没有在卸载时移除。这样每次路由切换旧的监听还挂在window上事件越积越多页面性能越来越差。8.2 路由切换 keep-alive为什么不刷新数据路由切换是生命周期使用频率最高的场景。特别是列表页 - 详情页 - 返回列表页这种流程设计上有两种选择不用keep-alive每次返回列表页组件重新创建created/onMounted都重新触发数据自然刷新用keep-alive缓存组件返回时不重新创建created不触发需要改用onActivated刷新数据如果你采用了第二种需要在onActivated里加上获取最新数据的逻辑。但需要注意onActivated每次从缓存切换到显示都会触发包括第一次进入页面时也会触发。所以如果你同时写了顶层代码和onActivated会造成数据重复请求。我自己的经验是用了keep-alive的页面索性把拉取数据的逻辑统一放在onActivated里顶层和onMounted不再重复请求。这样结构清晰也避免多余的网络开销。8.3 地图、图表、播放器三方库初始化的标准姿势前端项目里Mapbox、ECharts、视频播放器等第三方库的生命周期管理非常依赖挂载后初始化、卸载前销毁这个固定节奏。以 Mapbox 为例标准做法是import mapbox from mapbox-gl import { ref, onMounted, onBeforeUnmount } from vue const mapContainer ref(null) let map null onMounted(() { map new mapbox.Map({ container: mapContainer.value, style: mapbox://styles/mapbox/streets-v11, center: [120.15, 30.28], zoom: 9 }) }) onBeforeUnmount(() { if (map) { map.remove() map null } })很多地图类组件容易出现再次进入页面地图空白的问题原因就是上次创建的 map 实例没有被销毁这次重新初始化时 DOM 容器已经发生了变化。在onBeforeUnmount里执行map.remove()基本能解决 90% 的地图重复渲染问题。8.4 多文件上传、Canvas 绘制尺寸和节点都得等 mounted热词里提到的vue 多文件上传、canvas 2d vue也是生命周期应用的典型场景。Canvas 初始化必须在mounted之后因为需要拿到canvas的真实 DOM 节点并获取 2d context。而且如果你在弹窗里动态渲染 Canvas要注意v-if控制的时机弹窗从不可见到可见Canvas 的 DOM 节点是挂载后才生成的所以弹窗组件里的 Canvas 初始化逻辑也应该写在对应的生命周期钩子里而不是写在父组件里。文件上传组件如果涉及拖拽区域同样需要在mounted后给 DOM 元素绑定原生事件离开页面时要移除事件监听防止拖拽回调遗留栈内。9. 常见问题排查实录生命周期引发的典型 Bug9.1 数据请求了但页面没渲染症状接口返回了数据控制台也能打印出数据但页面始终是空白或旧的。排查思路先看数据是否被正确赋值到响应式变量。如果你是用let userList []而不是ref管理的普通变量数据变化不会触发视图更新再看在created里赋值是否早于模板渲染。实际上响应式数据在created赋值时可以正常驱动更新因为响应式系统已经建立确认你是否在请求返回前组件已经卸载。比如列表页发起了请求但用户在请求返回前就跳走了此时组件已卸载this.userList res.data会报警告。解决办法是在请求回调里判断组件是否仍然挂载或在卸载标志位里中断请求类似的问题在 Vue 3 中常见于onMounted里发请求请求是异步的等回调执行时组件可能已经卸载。Vue 3 不会报错但会有组件已卸载的警告甚至在项目里会收到Promise 未处理的异常提示。我的做法是引入一个isUnmounted标记let isUnmounted false onMounted(async () { const res await api.getData() if (!isUnmounted) { data.value res.data } }) onBeforeUnmount(() { isUnmounted true })9.2 页面重复进入定时器越积越多症状用户反复进入同一个页面后操作越来越卡浏览器内存不断上涨。排查思路几乎可以断定是定时器或全局监听没有清理干净的锅。在mounted里创建的setInterval必须有一个对应的beforeUnmount来清理。如果你发现清理了还是泄漏检查是否在父组件中使用v-if切换子组件时子组件里的onBeforeUnmount没有正确注册——比如钩子写在异步函数里了Vue 收集不到导致清理逻辑从未执行。9.3 updated 里死循环症状页面卡死控制台报Maximum call stack size exceeded。排查思路检查updated/onUpdated里是否修改了响应式数据且没有终止条件。只要updated里改数据就会再次触发更新导致死循环。9.4 动态路由参数变化为什么组件不更新这个问题看似跟生命周期无关其实密切相关。Vue Router 在切换路由时如果复用了同一个组件比如从/user/1跳到/user/2组件实例会被复用created和mounted不会重新触发于是页面数据不更新。正确做法是使用watch监听路由参数变化import { onMounted, watch } from vue import { useRoute } from vue-router const route useRoute() onMounted(() { fetchUserDetail(route.params.id) }) watch(() route.params.id, (newId) { fetchUserDetail(newId) })这个看似生命周期不工作的问题本质是理解组件复用与生命周期触发条件的关系。面试里被高频问到的动态路由参数变化时组件为什么不刷新答案就在这里。9.5 组合式 API 钩子没有执行症状onMounted里的代码没有执行但控制台不报错。排查思路最可能的原因是钩子写在了异步代码里比如setTimeout(() { onMounted(() { ... }) // 无效setup 上下文已丢失 }, 1000)组合式 API 要求生命周期注册必须在setup的同步执行上下文中完成。任何在异步回调里注册的钩子都不会生效。还有一种情况是onMounted写在了循环里注册条件满足但执行顺序不符合预期。记住钩子永远是同步注册的这是组合式 API 的基本规则。10. 选项式 API 和组合式 API 混用会怎样在写今天的文章之前又看到热词里同时出现了 Vue 2 和 Vue 3 的许多用法。这里补充一个非常实际的问题如果用script setup组合式 API 写组件同时又在defineComponent里混入了选项式created等钩子会发生什么Vue 3 设计上是兼容的选项式生命周期钩子和组合式生命周期钩子可以共存执行优先级是选项式钩子先于组合式钩子执行。具体来说选项式created会先执行然后是setup顶层代码可以理解成组合式的创建阶段再然后是onMounted等组合式挂载钩子。在实际项目中我并不建议混用太多。混用会让代码的意图变得混乱比如有些逻辑写在选项式created里、有些逻辑写在setup顶层排查问题时很难确定执行顺序。我的经验是新代码统一走组合式老代码统一留在选项式除非重构时明确迁移整个组件否则不要同一组件里两种风格长期混存。11. 给 Vue 入门者的学习路线建议如果你刚接触 Vue看到热词里的vue快速学习路线、vue入门基础教程我建议你掌握生命周期的路径是把八个核心钩子按阶段画在纸上背下触发顺序写一个最小 Demo在每个钩子打印console.log观察控制台输出顺序用一个父组件嵌套一个子组件观察父子生命周期顺序重点练习created发请求、mounted初始化第三方库、beforeUnmount清理副作用这三件事再看watch、computed与生命周期的配合理解它们之间的差异用keep-alive练习activated和deactivated掌握缓存组件的独特习惯自己动手打日志是学习生命周期最快的方式比看任何教程都管用。你可以花十几分钟写个计数器组件然后逐个钩子打印出来你会对整个过程形成肌肉记忆。以后再遇到任何关于什么时候做这件事的疑问第一反应不再是猜而是回忆生命周期里对应节点能做什么。12. 最后分享一点我的经验我在实际项目中查 bug只要问题涉及时机不对最后八成都能归因到生命周期上。举个例子某次上线前测试发现从 A 页面快速切换到 B 页面时B 页面会闪现 A 页面的残留数据。排查了很久最终发现问题出在 B 页面mounted里才开始请求数据而请求返回前模板已经用初始的ref([])渲染了一遍。这本质上是生命周期时机与异步请求之间的配合问题解决办法是让初始数据状态为null而不是空数组并在模板里对null做兜底展示或者在setup顶层立刻发起请求。另外多提一个容易忽略的细节nextTick与生命周期结合使用。当你在mounted里需要操作刚渲染的动态节点时理论上mounted时期 DOM 已经就绪但如果你使用了v-for、v-if等指令或者某些数据是异步更新后才渲染的那么可能需要await nextTick()再操作。Vue 的 DOM 更新是异步批量的也就是说你在数据变化后立即访问 DOM拿到的不一定是最新值。理解数据变更 - 等待异步渲染 - nextTick 回调这条链路能让你的生命周期代码更稳健。Vue 生命周期不是一堆需要死记硬背的函数名而是一张组件从生到死的时间线。掌握它你写代码的主场感会完全不同。希望你在下一个项目里每写一个钩子时都能清晰地知道此刻组件正处于生命周期的哪个节点我能做什么不该做什么。这种认知上的清晰感远比记住几个 API 名字有价值得多。

Vue生命周期全解：从创建到销毁，一张图掌握八个钩子

相关推荐

从内容质量到AI辅助审校：打造impeccable写作标准与自动化工作流

C/C++自增运算符辨析：++i与i++的语义、性能及工程实践

五维管理坐标：管理者一图看清自我、向上、向下、横向与结果

更多资讯

StarRC Open/Short调试与寄生参数一致性验证实战指南

SSM项目复现全指南：从环境搭建到调试部署的完整实践

Unity手游动态更换App图标双端完整方案与防坑指南

Python实现A股MA5上穿MA10金叉实时筛选：数据源到定时任务全解析

信息学奥赛一本通1196踩台阶：递推算法入门与常见踩坑全解析

微信小程序+SpringBoot刷题系统实战部署指南

今日更新

Multisim仿真NE555 PWM控制器：从搭电路到调占空比全流程

S32K312 AUTOSAR BSW开发实战：从配置踩坑到烧录交付

双目视觉三维人脸重建：从视差图到点云粗配准全流程解析

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？