被说烂了的Vue生命周期,用大白话记录一下。有脚就能看懂,不用带脑子。

网上看过很多讲Vue生命周期,感觉多少费点脑子。于是想自己总结一下。有眼就行,看就懂了。

Vue生命周期分为4个阶段,每个阶段触发2个钩子函数

四个阶段分别是:

创建(create)
挂载(mount)
更新(update)
销毁(destroy)

生命周期函数为:
上面四个单词,前加before,后加ed;

Create阶段
beforecreate 这个阶段 还没有完成数据监视和数据代理,也就是访问不到data中数据和methods中方法
created 这个阶段完成了数据监测和数据代理,可以访问到data中数据
Mount阶段
beforemount这个阶段,页面呈现的是未经Vue编译的dom结构,这个阶段对dom的操作最终都不生效,也就是说,你在这里操作数据,没用;
mounted这个阶段,页面中呈现的是经过Vue编译的DOM结构,这个阶段对DOM操作,有效果,但是不推荐。这个阶段一般,发网络请求,开启计时器,订阅消息,绑定自定义事件
Update阶段
beforeupdate这个阶段,数据时新的,但是页面是旧的。
updated这个阶段,页面和数据保持同步。
注意:这个阶段就是Model --> View 的更新(生成新的虚拟dom和旧的dom作比较,最终完成页面更新)
destroy阶段
beforedestroy这个阶段,vm中所有data,methods指令都可以访问,但是马上执行销毁,一般在这个阶段:关闭定时器,取消订阅消息,解绑自定义事件。
destroyed这个阶段,Vm销毁了,干啥也不灵了。

不过应该是11个钩子函数,以后在补吧,今天到此休息~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值