vue生命周期总结

本文详细介绍了Vue实例从创建、编译到销毁的整个生命周期过程,并解释了各生命周期钩子的调用时机及其作用。

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

当Vue实例话以后要经历三个阶段:创建,编译,和销毁。

其生命周期的钩子是这样子的:

这里写图片描述


1-init
在实例初始化的时候同步调用(此时数据观察,事件和watcher都尚未初始化)


2-created
在实例创建之后同步调用(此时实例已经结束了解析,数据绑定属性,方法,watcher、事件回调已经建立。但是DOM编译还没有开始,$el还不存在)


3-beforeCompile
在编译开始前调用


4-compiled
在编译结束后调用(此时的指令已经生效,因而数据变化将触发DOM更新,但是$el已经插入文档)


5-ready
在编译结束以后和$el 第一次插入到文档之后调用(如在第一次aatched钩子之后调用)


6-attached
在vm.$el插入DOM时调用(必须由指令或者实例方法插入)


7-detached
在vm.$el从DOM中删除时调用(必须由指令或实例方法删除)


8-beforeDestory
在开始销毁实例前调用(此时实例仍然有功能)


9-destoryed
在实例被销毁以后调用(此时所有绑定和实例指令已经解绑,所有的实例已经被销毁)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值