【前端学习 - Vue (3) 生命周期】

最新推荐文章于 2025-04-23 07:00:00 发布

宇六岁鸭

最新推荐文章于 2025-04-23 07:00:00 发布

阅读量4k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端学习

本文链接：https://blog.youkuaiyun.com/weixin_60364883/article/details/126715290

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨Vue.js组件的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等各个阶段。详细阐述每个阶段的特点、适用场景，并解析首次页面加载时触发的钩子。通过理解生命周期，能更好地管理和优化Vue应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 生命周期

1-1 基本概念

什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。

注意：浏览器有8个钩子，但是node中做服务端渲染的时候只有beforeCreate和created

beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。可以做页面拦截。当进一个路由的时候我们可以判断是否有权限进去，是否安全进去，携带参数是否完整，参数是否安全。使用这个钩子好函数的时候就避免了让页面去判断，省掉了创建一个组建Vue实例。
created 发生在实例创建完成后，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互（因为Dom还没有创建），如果非要想，可以通过vm.$nextTick来访问Dom。
beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
mounted发生在挂载完成后，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。
beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。
beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器，销毁父组件对子组件的重复监听。beforeDestroy(){Bus.$off("saveTheme")}
destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。