前端面试题:怎么理解vue的生命周期

191 阅读1分钟

一,vue有哪些生命周期?

vue的生命周期:vue实例从创建到销毁的全过程,这个过程可以一般分为四个阶段
第一阶段:初始化阶段 创建vue实例,准备数据
第二阶段:挂载阶段 准备模板,渲染视图
第三阶段:数据更新阶段 当数据变化时,会进行新旧DOM的对比,对比出差异部分,进行差异化更新
第四阶段:实例销毁阶段 当vm.$destroy()被调用,vue实例就会被销毁,释放相关资源,此时再更新数据,视图不会再变化

各阶段包含的钩子函数:

第一阶段
beforeCreate  在data数据注入到vm实例之前,此时vm身上没有数据
created       在data数据注入到vm实例之前,此时vm身上有数据

第二阶段
beforeMount   生成的结构替换视图之前,此时DOM还没更新
mounted       生成的结构替换视图之前,此时DOM已经更新完成

第三阶段
beforeUpdate  数据变化了,dom更新之前
updated       数据变化了,dom更新之后

第四阶段
beforeDestroy 实例销毁,是否资源之前
destroyed     实例销毁,是否资源之后

这些钩子函数会在vue的生命周期的不同阶段,自动被vue调用

二,一旦进入到页面或者组件,会执行哪些生命周期,顺序

beforeCreate
created
beforeMount 
mounted

三,在哪个阶段有$el,在哪个阶段有$data

beforeCreate    两个都没有
created         有data,没有el
beforeMount     有data,没有el
mounted         两个都有

四,如果加入keep-alive会多两个生命周期

activated     被keep-alive缓存的组件激活时调用
deactivated   被keep-alive缓存的组件停用时调用

五,如果加入keep-alive,第一次进入组件会执行哪些生命周期?

beforeCreate
created
beforeMount
mounted 
activated

六,如果加入keep-alive,第二次或者第n次进入组件会执行哪些生命周期?

只执行一个生命周期:activated

七,常用的钩子函数使用场景:

    beforeCreate  做loading的一些渲染
    created       结束loading, 发送数据的请求,拿数据
    mounted       可以对dom进行操作
    updated       监视数据的更新
    beforeDestroy 销毁非vue资源,防止内存泄漏,例如清除定时器
    activated     当我们运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在