一、Vue生命周期的介绍
1、什么是生命周期?
vue实例从创建到销毁的过程就是生命周期。也就是vue里从开始创建、初始化数据、编译模板、挂载、渲染、更新、销毁等一系列的过程,我们统称为vue的生命周期。
2、vue生命周期有什么作用呢?
vue实现的功能都是围绕生命周期来进行,在不同的阶段我们要使用不同的钩子函数可以实现对组件数据的管理、DOM渲染的操作。
二、Vue生命周期有哪些?
1、有哪些生命周期
系统自带:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
2、一旦进入到页面或者组件,会执行哪些生命周期,顺序。
beforeCreate
created
beforeMount
mounted
3、在哪个阶段有$el,在哪个阶段有$data
beforeCreate 啥也没有
created 有data没有el
beforeMount 有data没有el
mounted 都有
4、如果加入了keep-alive会多俩个生命周期
activated、deactivated
5、如果加入了keep-alive,第一次进入组件会执行哪些生命周期?
beforeCreate
created
beforeMount
mounted
activated
6、如果加入了keep-alive,第二次或者第N次进入组件会执行哪些生命周期?
只执行一个生命周期:activated
7、父子组件的生命周期
父组件执行到beforeMount->执行子组件,最后是父组件的mounted
如果有兄弟组件,父组件执行到beforeMount -> 兄弟组件依次执行到beforeMount -> 按照顺序执行mounted ,最后是父组件的mounted
销毁父组件,先销毁子组件,再销毁父组件
三、Vue的8个生命周期做了哪些事情?
创建:
beforeCreate:
创建前,实例初始化之后,this指向了创建的实例,数据观察、事件、DOM节点都没形成
data,methods,watch方法和数据不能使用
created:
创建后,实例创建了,有数据,初始化了一些依赖
可以访问data,computed,watch上面的方法和数据
初始化已经完成了,发送异步请求、结束loading事件
此时还没有挂载DOM。不能操作DOM,若非要使用在在Vue.nextTick()的回调函数中
(DOM未渲染,拿到了数据)
挂载:
beforeMount:
挂在前,拿不到DOM元素,但是根节点已将创建了
这个阶段就是一个过渡阶段,一般很少用,最多一两次
mounted:
挂载后,创建了实例,元素节点全部生成,双向数据绑定
可以操作DOM
可以向后端发送请求,拿到数据,配合路由作别的事
(DOM渲染了,拿到了数据,有可能会造成闪屏的问题)
更新:
beforeUpdate:
数据更新前,数据驱动DOM
数据在更新后可能没有立即更新数据,但是DOM里的数据会改变
访问现在的DOM,手动添加或删除事件监听器
updated:
数据更新后,完成了虚拟DOM的重新渲染
组件的DOM已经完成更新,操作DOM
注意:不能在这里修改属性(操作),否则会进入死循环
[
activated:在用vue-router时用了keep-alive来缓存组件状态
我们的子组件需要每次加载时都需要进行一些操作的时候,可以在这个周期里
deactivated:keep-alive组件被移除的时候使用
]
销毁
beforeDestroy:
销毁前,可以删除定时器、提示信息
destroyed:
销毁后,当前组件就已经被删除了,销毁监听事件、组件、事件、子组件
当前组件不存在了,不能在操作里面的任何东西