vue生命周期
- 生命周期:每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程/
- 钩子函数:不需要触发,自定执行的函数就叫钩子函数。
Vue2.0的生命周期钩子一共有10个
beforeCreate—实例初始化
什么都是undefined
created----实例创建完成
Vue 实例观察的数据对象data已经配置好,已经可以得到app.message的值
属性和方法的运算
watch/event 事件回调
$el还是undefined
beforeMount —挂载之前被调用
相关的 render 函数首次被调用。
data和el均已经初始化
找到了挂载点el,el的值为“虚拟”的元素节点
{
{
}},v-for还没有解析
mounted----挂载完成执行的回调
el 被新创建的 vm.$el 替换
数据解析完成,页面初始化好了
运用场景:请求数据(ajax)、打开计时器、给window|document添加事件
beforeUpdate----更新之前执行的回调
发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程
页面更新之前,不是数据变化之前,所以拿到的是新值。
目前学到的知识中,只有data中的数据变了,才会触发更新期的执行
updated-----更新之后触发的钩子函数
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作
activated---- keep-alive 组件激活时调用
deactivated—keep-alive 组件停用时调用。
beforeDestroy-----实例销毁之前调用
当vm.$destroy()触发了,就会进入销毁期
销毁之前:清除计时器、清除window|document上的事件
destroyed----Vue 实例销毁后调用
调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
总结
1、除了beforeCreate和created钩子之外,其他钩子均在服务器端渲染期间不被调用
###
2、在created钩子中可以对data数据进行操作,这个时候可以进行ajax请求将返回的数据赋给data
3、在mounted钩子对挂载的dom进行操作
4、在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了,如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发
常见关于vue生命周期的面试题
1、谈谈你对Vue生命周期的理解?
(1)生命周期是什么?
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
(2)各个生命周期的作用
beforeCreate 组件实例被创建之初,组件的属性生效之前
created 组件实例已经完全创建,属性也绑定,但真实 dom还没有生成,$el 还不可用
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用
mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子 beforeUpdate 组件数据更新之前调用,发生在虚拟 DOM 打补丁之前
update 组件数据更新之后
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用
2、一进来页面发起ajax在哪个阶段?
可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。(本人常放置到mounted中可以操作dom,当然也可以放到created中)
3、Vue的父组件和子组件生命周期钩子函数执行顺序
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类
为以下 4 部分:
加载渲染过程:
父 beforeCreate -> 父 created -> 父 beforeMount -> 子beforeCreate -> 子 created -> 子 beforeMount -> 子mounted -> 父 mounted
4、谈谈你对keep-alive的了解?
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,避免重新渲染 ,其有以下特性:
对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated;一般结合路由和动态组件一起使用,用于缓存组件;
5、keep-alive 会重复触发生命周期吗?如果想要重复触发的逻辑如何实现?
不会重复触发生命周期,如果想要重复触发的逻辑写在activated deactivated.