简述vue生命周期,以及每个周期做的事情?

思路:定义-> 各个阶段->阐述整体流程->结合实际

定义:

   在vue组件实例被创建后,会经历一系列初始化过程,例:数据观测,模板编译,挂载实例到dom上,以及数据变化时,更新dom数据。在这个过程中会运行名叫生命周期钩子的函数。以便于用户在特定阶段添加自己的代码

各个阶段

生命周期钩子每个阶段的事情

beforeCreate(创建前)

vue实例里挂载的元素el和数据对象data都是undefined,还未初始化

可以在这加个loading事件,在加载实例时触发

created(创建后)

vue实例的数据对象data可访问,还未挂载到DOM上,el还没有

可以访问各种数据,获取接口数据等

初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用

beforeMount(挂载前)

组件挂载之前,vue实例的el和data都已初始化完成,还未挂载到真实dom节点上

mounted(挂载后)

组件挂载到实例之后

dom已被创建,可以用于访问数据和dom元素

挂载元素,获取到DOM节点

beforeUpdate(更新前)

组件数据发生变化更新之前

“view”层还未更新,可以获取更新前的状态

updated(更新后)

组件更新完成之后

“view”层已更新,所有的状态都是最新的

beforeDestroy(销毁前)

组件实例销毁之前,this还能获取到实例

手动解除绑定的事件如:定时器,订阅的取消

destroyed(销毁后)组件实例销毁之后

问题一:第一次页面加载会触发哪几个钩子  ?

beforeCreate  created  beforeMount mounted

问题二:父子组件的生命周期触发顺序?

加载渲染过程:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程:
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程:
父beforeUpdate->父updated
销毁过程:
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

问题三:keep-alive多了那两个生命周期?

activited unactivited

问题四:加入keep-alive,第一次进入页面会执行哪些生命周期?第二次进入呢?

第一次进入:beforeCreate  created  beforeMount mounted activited

第二次进入:activited

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值