大宇宇宇
发布于 2025-09-01 / 11 阅读
0
0

vue的生命周期

生命周期是什么

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

Vue生命周期主要分为四个阶段:创建挂载更新销毁。以下是各个阶段的详细说明:


1. 创建阶段(Creation)

beforeCreate

  • 实例刚在内存中被创建出来,未初始化数据观测和事件配置。

  • 无法访问 datapropscomputedmethods 等。

  • 常用于插件初始化或全局变量设置。

created

  • 实例已创建完成,数据观测、属性和方法的配置已完成。

  • 可以访问 dataprops 等,但模板未编译,DOM 不可用。

  • 适合进行异步数据请求(如 API 调用)或初始化状态。


2. 挂载阶段(Mounting)

beforeMount

  • 模板编译完成,但尚未挂载到 DOM。

  • 此时 $el 仍然是虚拟的,未渲染到页面。

  • 很少使用,通常用 createdmounted 替代。

mounted

  • 实例已挂载到 DOM,模板渲染为真实 DOM。

  • 可以访问 DOM 元素,适合进行 DOM 操作(如获取节点尺寸、绑定事件等)。

  • 常用于第三方库的初始化(如图表库、轮播图等)。


3. 更新阶段(Updating)

beforeUpdate

  • 数据发生变化,但 DOM 尚未更新。

  • 可以在 DOM 更新前进行一些状态或逻辑的修改。

  • 适合在更新前保存当前 DOM 的状态。

updated

  • 数据变化导致的 DOM 更新已完成。

  • 可以执行依赖更新后 DOM 的操作,但要避免修改数据,以免造成无限循环。

  • 常用于 DOM 更新后的操作(如重新计算布局)。


4. 销毁阶段(Destruction)

beforeDestroy

  • 实例即将被销毁,但仍可访问实例的数据和方法。

  • 适合进行清理工作(如清除定时器、解绑事件等)。

destroyed

  • 实例已被销毁,所有绑定和子实例也被移除。

  • 无法再访问实例的数据和方法。

  • 用于确认资源释放的完成情况。


5. 特殊钩子(Vue 3 新增)

activated

  • keep-alive 缓存的组件激活时调用。

  • 常用于缓存组件的数据恢复或逻辑重置。

deactivated

  • keep-alive 缓存的组件停用时调用。

  • 适合清理缓存组件的状态。


6. 错误捕获钩子

errorCaptured

  • 捕获子孙组件的错误。

  • 可用于错误日志记录或错误处理。


mount和create的区别是常见问题:

create阶段

  • 实例刚在内存中创建完成

  • 数据观测(data observer)、属性和方法的配置已完成

  • 此时DOM还未生成,无法访问$el

  • 适合进行数据请求、初始化非DOM操作

mount阶段

  • 实例已挂载到DOM上

  • 模板编译/渲染完成,可以访问DOM元素

  • 可以进行DOM操作、获取DOM节点尺寸等

  • 适合进行需要DOM的初始化工作

简而言之:create是"出生",mount是"入住"。create时组件存在于内存中,mount时组件已渲染到页面上。

总结

Vue 的生命周期钩子提供了在组件不同阶段执行逻辑的能力,合理使用这些钩子可以优化性能、管理资源并提升用户体验。在面试中,不仅要记住钩子的名称和顺序,还需理解其适用场景及注意事项。



评论