VUE生命周期理解(从上往下整体流程)

本文详细解析了VUE的生命周期,从构造函数生成实例开始,经历初始化、挂载、更新及销毁等阶段。深入探讨了各生命周期钩子如beforeCreate、created、beforeMount、mounted、beforeUpdate、beforeDestroy的作用及调用时机。

VUE生命周期(从上往下整体流程)

****构造函数生成vue实列

事件和生命周期钩子初始化

beforeCreate: 在data初始化,Events事件配置前调用

created:在data已初始化,计算属性事件回调,但DOM树被没有挂载
判断是否有el对象 无则挂载

是否有模板 =>有则将模板转化为render换上,通过它去渲染创建DOM树
=>无则编译el对像外层html作为模板

beforeMount :在挂载前被调用render函数首次被调用,生成虚拟DON
创建vue实例下的$el(虚拟)并将其替换真正的DOM

mounted: 挂载完成,DOM树已经渲染到页面,可进行DOM操作

beforeUpdate :数据有更新被调用

update: 虚拟DOM重新渲染补丁以最小的DOM开支来重新渲染DOM

beforeDestroy :实列销毁之前调用在这里还可以访问实列的数据

清除update,子组件,事件监听等

destroyed: 组件销毁后调用****

看了些文章 已经自己的理解

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值