一,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 当我们运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在