当前位置：首页 > news >正文

【Vue篇】潮汐中的生命周期观测站

news 来源：原创 2025/5/20 6:46:07

引言

一、Vue生命周期

二、Vue生命周期钩子

三、、生命周期钩子实战

1.在created中发送数据

2.在mounted中获取焦点

四、综合案例-小黑记账清单

1.需求图示：

2.需求分析

3.思路分析

4.代码

5. 总结

引言

💬 欢迎讨论：如果你对本篇内容有任何疑问或想深入探讨，欢迎在评论区留言交流！

👍 点赞、收藏与分享：觉得内容有帮助就请点赞、收藏并分享给更多学习Vue的小伙伴！

🌊 Vue生命周期如潮汐涨落——created的涨潮初涌数据，mounted的浪峰盛放DOM，在更新中起伏呼吸，于销毁时退潮归海，而数据驱动视图的浪花，始终追随着响应式月球的引力轨迹。

一、Vue生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

二、Vue生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

钩子	阶段	数据是否可用	DOM 是否渲染	典型用途
`beforeCreate`	创建前	❌	❌	插件初始化、全局事件绑定
`created`	创建后	✅	❌	发送数据请求、数据初始化
`beforeMount`	挂载前	✅	❌	极少使用
`mounted`	挂载后	✅	✅	操作 DOM、集成第三方库
`beforeUpdate`	更新前	✅	✅	获取更新前 DOM 状态
`updated`	更新后	✅	✅	获取更新后 DOM 状态
`beforeDestroy`	销毁前	✅	✅	清理定时器、解绑全局事件
`destroyed`	销毁后	❌	❌	后续清理工作

代码演示：

  <div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 1. 创建阶段（准备数据）beforeCreate () {console.log('beforeCreate 响应式数据准备好之前', this.count)},created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段（渲染模板）beforeMount () {console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)},mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)// 可以开始操作dom了},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdate () {console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)},updated () {console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)},// 4. 卸载阶段beforeDestroy () {console.log('beforeDestroy, 卸载前')console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')},destroyed () {console.log('destroyed，卸载后')}})</script>