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

你可能感兴趣的:(vue面试整理,vue.js,前端,javascript)