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

Vue的生命周期

news 2025/6/8 3:45:15

一、生命周期是什么

生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作PS：在Vue生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())

二、生命周期有哪些

一、生命周期

Vue 组件的生命周期分为 8 个核心阶段 和 3 个特殊场景钩子，贯穿组件从创建到销毁的整个过程。以下是各阶段的详细说明：

生命周期钩子	触发时机	典型应用场景
beforeCreate	组件实例刚被创建，尚未初始化数据和 DOM。	可在此阶段添加加载动画、初始化非响应式数据。
created	组件实例创建完成，数据观测（data）和方法（methods）已初始化，但未开始渲染 DOM。	发送 AJAX 请求获取数据、注册全局事件监听。
beforeMount	组件即将挂载到 DOM，此时 `$el` 已生成（虚拟 DOM），但未插入真实 DOM。	访问渲染前的虚拟 DOM 结构，或在渲染前修改组件配置。
mounted	组件已挂载到真实 DOM，`$el` 存在且可操作。	操作真实 DOM（如初始化第三方库，如 Vue.js 与 jQuery 结合）、绑定滚动事件等。
beforeUpdate	组件数据更新前触发，虚拟 DOM 尚未重新渲染。	可在此阶段获取更新前的 DOM 状态，或阻止不必要的更新（需结合 `nextTick`）。
updated	组件数据更新完成，虚拟 DOM 重新渲染并打补丁到真实 DOM。	依赖更新后 DOM 结构的操作（如计算滚动位置、调整图表尺寸），需避免在此触发更新。
beforeDestroy	组件即将被销毁，实例仍可用。	清除定时器、解绑全局事件、取消订阅等收尾工作，防止内存泄漏。
destroyed	组件已被销毁，所有子组件、事件监听和 DOM 关联被移除。	无实际操作场景，仅用于确认销毁完成（如打印日志）。

二、特殊场景生命周期（3 钩子）

生命周期钩子	触发时机	适用场景
activated	被 `<keep-alive>` 缓存的组件激活时（首次进入或切回）。	恢复组件状态（如重置滚动位置）、重新请求数据（需结合 `deactivated` 缓存数据）。
deactivated	被 `<keep-alive>` 缓存的组件停用时（离开页面或切换路由）。	暂停动画、取消定时器、缓存当前组件状态（如表单数据）。
errorCaptured	捕获到子孙组件抛出的错误时触发。	全局错误处理（如记录错误日志、显示错误提示），可返回 `false` 阻止向上传播。