Vue生命周期
从开始创建、初始化数据、编译模版、挂载demo、渲染、更新、渲染、销毁等一系列过程,我们称为生命周期。
也就是Vue实例从创建到销毁的过程就是生命周期
每一个组件或实例都会经历一个完整的生命周期,总共三个阶段:初始化、运行中、销毁。
Vue生命周期详解
beforeCreate
这个阶段,数据还没有挂载,只是个空壳,无法访问到数据和真是的dom,一般不用于操作。
注:特殊的需求可以在这里挂载loading,如果有遇到。
created
挂载数据,绑定事件执行created函数, 这里可以使用到数据,也可以更改数据,这里更改数据不会
触发updated函数,这里可以在渲染前倒数第二次更改数据,不会触发其他钩子函数
注:这里可以做初始数据的获取
beforeMount
开始找实例模版,编译模版为虚拟dom放到render函数中准备渲染,然后执行beforeMount钩子函数,
在这里虚拟dom已经创建完成,马上就要渲染,这里也可以更改数据,不会触发updated, 这里是最有
一次机会更改数据不触发其他钩子函数机会
注:这里可以做初始数据的获取
mounted
接下来开始render进行渲染出真实的dom,然后进行mounted钩子函数,此时组件已经出现在页面中,
数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实的dom
注:这里回操作真实的dom
beforeUpdate
当组件或实例数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dome机制会重新构建虚拟dom
与上一次虚拟dom树利用diff算法惊醒对比后进行重新渲染
注:一般不处理什么操作
update
当更新完成后,执行updated,数据有意境更改完成,dome也重新render完成,可以操作更新后的dom
注:一般不处理什么操作
beforeDestroy
当经过这个阶段或者调用$destroy方法后,立即执行beforeDestroy
注:这里一般做一些善后工作,例清除计时器、清除非指令绑定的事件等
destroyed
组件的数据绑定、监听等去掉后只剩下dom空壳之后执行destroyed
注:这里也可以做一些善后工作,例清除计时器、清除非指令绑定的事件等
问:父子组件走生命周期的时候什么时候开始子组件的生命周期
答: 父组件beforeCreate =》父组件 created=》父组件 beforeMount=》
子组件beforeCreate=》子组件created=》子组件 beforeMount