Vue——简述生命周期以及每个阶段做的事

原创

于 2022-04-06 18:55:11 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #前端框架 #前端

本文介绍了Vue组件的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed八个阶段，并阐述了各阶段的主要任务。在Vue3中还有额外的调试和服务端渲染生命周期。实践中，beforeCreate适合初始化任务，created阶段可以获取数据，mounted阶段能操作DOM，beforeUpdate捕获更新前的状态，updated则表示更新完成，beforeUnmount和unmounted用于资源清理和解绑。

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

每个Vue组件实例被创建后都会经过一系列初始化步骤，比如，它需要数据观测，模板编译，挂载实例到dom上，以及数据变化时更新dom。这个过程中会运行叫做生命周期钩子的函数，以便用户在特定阶段有机会添加他们自己的代码。

生命周期总共可以分为8个阶段：创建前后（beforeCreate/created），载入前后（beforeMount/mounted），更新前后（beforeUpdate/updated），销毁前后（beforeDestroy/destoryed），以及一些特殊场景的生命周期。Vue3中新增了三个用于调试和服务端渲染的场景。
在这里插入图片描述

生命周期流程图

在这里插入图片描述
结合实践：
beforeCreate：通常用于插件开发中执行一些初始化任务
created：组件初始化完毕，可以访问各种数据，获取接口数据等
mounted：dom已创建，可用于获取访问数据和dom元素；访问子组件等
beforeUpdate：此时“view”层还未更新，可用于获取更新前的各种状态
updated：完成“view”层的更新，更新后，所有状态已是最新
beforeunmounted：实例被销毁前调用，可用于一些定时器或订阅的取消
unmounted：销毁一个实例。可清理它与其他实例的连接，解绑它的全部指令及事件监听