简述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