VUE的生命周期

一. 什么是生命周期?

1. vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。
2. 一个vue实例的创建都对应的一整个完整过程,在这个过程中,每个阶段都会有自己的钩子函数。

二. Vue生命周期分为八个阶段

1. 分别是beforeCreate(创建前)、created(创建后)、beforeMount(挂载前)、mounted(挂载后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)。
2. beforeCreate 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用,在此钩子函数中,还不能访问data或者event或者监听器;
3. created 在实例创建完成后被立即调用,在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用,到这一步,可以访问data的属性,调用函数,所以,如果项目需要通过异步请求获取数据,就在此钩子函数中执行;
4. beforeMount 在挂载开始之前被调用,相关的 render 函数首次被调用。 到这一步,虚拟dom渲染完毕,但是还未挂载到真实dom上。
5. mounted 实例被挂载后调用,虚拟dom渲染成真实dom,在此生命周期钩子中可以对dom进行操作,根据你的实际业务逻辑需求,在此步也可以异步的请求数据,因为生命周期到了这一步可以操作真实dom,所以在此步经常会做一些第三方插件的初始化工作,因为很多第三方的插件都需要获取真实dom,回忆富文本编辑时富文本的初始化操作。
6. beforeUpdate 在数据发生改变,但页面还没有完成更新时执行的操作,在此阶段视图的数据和DOM元素的数据没有保持同步。(这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器)。
7. updated 这个时候数据发生了改变,并且视图页面也已经完成了更新,因此,该阶段看到的DOM元素的内容是最新内容。(注意updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕,可以在 updated 里使用 vm.$nextTick)。
8. beforeDestroy 此阶段Vue实例仍然完全可用,也就是还能访问到页面的响应式数据和事件。(可以在这里注销eventBus等事件)。
9. destroyed DOM元素被销毁,此时对应的Vue 实例所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

三. 如图所示

相关推荐
Hopebearer_9 分钟前
页面突然只剩 DOM?一次静态资源版本错配排查
前端·部署
抱抱宝14 分钟前
Agent-study项目教程(03):手写 Mini-ReAct Agent(不依赖框架)
javascript·人工智能·gpt·react.js·prompt·agent
东风破_44 分钟前
ESLint 是什么?为什么你的项目需要它?
前端·后端·代码规范
用户938515635071 小时前
Next.js 笔记系统(二):Redis 数据服务与侧边栏组件拆分实战
javascript·全栈
java1234_小锋2 小时前
Vue3专题 - 组件基础
vue.js·vite
圣殿骑士-Khtangc2 小时前
Go字符串高效拼接性能对比与底层原理分析
服务器·前端·golang
BigTopOne3 小时前
【ijkplayer】 硬解码流程
前端
kyriewen3 小时前
DeepSeek Harness开源第一天我就上手了——和Claude Code的差距比想象中大
前端·ai编程·deepseek
捡田螺的小男孩4 小时前
什么是 Skill?手把手带你写一个简单有用的 Skill!
前端·后端·程序员
IT_陈寒4 小时前
Redis集群这个坑,差点让我通宵
前端·人工智能·后端