如何理解Vue中的生命周期?

一、什么是生命周期?

vue中的实例从创建到销毁的过程就是生命周期,vue的生命周期主要分为四大阶段八个钩子函数

二、哪四大阶段八个钩子函数?

1.创建前后

beforeCreate:钩子函数beforeCreate在执行的时候,data和method还没有初始化,只有一些vue的默认方法

created: 钩子函数created在执行的时候,data和method已经初始化可以操作了

2.渲染前后

beforeMount: 钩子函数beforeMount在执行的时候,模板已经在内存中渲染好了,但是还没有渲染到页面上

mounted: 钩子函数mounted在执行的时候,把内存中渲染好的模板替换到浏览器上,完成真正的页面渲染

3.挂载前后

beforeUpdate: 钩子函数beforeUpdate在执行的时候,data中的数据已经更新了,但是页面还没有更新

扫描二维码关注公众号,回复: 16102149 查看本文章

updated: 钩子函数updated在执行的时候,把data中更新好的数据同步更新到视图

4.销毁前后

beforeDestroy:钩子函数beforeDestroy在执行的时候,实例进入准备销毁的阶段,data、method、指令等还是可用的状态

destroyed: 钩子函数destroyed在执行的时候,实例完成销毁,ata、method、指令等不可用

常用的两个生命周期钩子是created(发ajax请求,初始化数据)mounted(渲染数据)

补充: 

但在使用Vue的内置组件keep-alive时,会另外多出3个生命周期钩子

activated: 在keep-alive组件激活时调用

deactivated: 在keep-alive组件停用时调用

errorCapured: 当捕获来自一个子孙组件的错误时被调用,这个钩子函数会收到3个参数:错误对象、发生错误的组件实例、包含错误来源信息的字符串;可以返回false来阻止该错误继续向上传播

三、父子组件的生命周期钩子 

1.加载渲染过程

父beforeCreate --> 父created --> 父beforeMount --> 子beforeCreate --> 子created --> 

子beforeMount --> 子mounted --> 父mounted

2.子组件更新过程

父beforeUpdate --> 子beforeUpdate --> 子updated --> 父updated

3.父组件更新过程

父beforeUpdate  --> 父updated 

4.销毁过程

父beforeDestroy --> 子beforeDestroy --> 子destroyed --> 父destroyed

猜你喜欢

转载自blog.csdn.net/weixin_48082900/article/details/128867625
今日推荐