vue 生命周期
什么是生命周期,有什么作用
定义:vue 实例从创建到销毁的过程,在某个特定的位置会触发一个回调函数
作用:供开发者在生命周期的特定阶段执行相关的操作
生命周期分别有几个阶段
有四个阶段,每个阶段有两个钩子,一个前一个后
创建阶段:
beforeCreate :new Vue( ) 之后执行,但所以数据都还无法访问
created: 能拿到实例数据,这里更改数据不会触发更新,可使用this.$nextTick来执行要访问DOM的操作
挂载阶段:
beforeMount :template模版导入生成虚拟DOM,更改数据不会出发更新
mounted : 真实DOM挂载完毕,可以用 $refs访问到真实DOM
更新阶段:
beforeUpdate :响应式数据发生更新,虚拟 DOM 生成,在这个阶段修改数据不会重新渲染
updated :真实DOM完成更新,这里修改数据可能会导致无限循环更新。
销毁阶段:
beforeDestroy :销毁之前,所以实例数据DOM都可以访问,做组件销毁前的收尾工作,如注销事件绑定,清除定时器,销毁大数据
destroyed:组件被销毁,DOM被移除
使用keepAlive缓存组件,组件切换会触发actived / deactived两个钩子:
actived: 相当于创建和挂载阶段
deactived: 相当于销毁阶段
生命周期执行顺序
-
第一次加载会执行
beforeCreate,created,beforeMount,mounted
-
父子组件第一次渲染执行顺序(子的渲染夹在父的
beforeMount
和mounted
之间):
父beforeCreate
->父created
->父beforeMount
->子组件加载四个阶段
->父mounted
-
更新子组件的数据:子
beforeUpdate
->子updated
-
更新在父组件的数据(也在子组件渲染):
父beforeUpdate
-子beforeUpdate
->子updated
-父updated
-
销毁过程:父
beforeDestroy
->子beforeDestroy
->子destroyed
->父destroyed