Vue生命周期简图
所谓生命周期钩子函数(简称生命周期函数),指的是组件的创建、更新、销毁三个阶段所触发执行的函数。根据每个阶段触发的钩子函数,我们可以相应的做一些操作,如获取后端接口数据、监听事件、执行事件、执行定时器、移除事件、清理定时器等等。
生命周期根据上面的三个阶段分为:
实例化期/组件创建
“生存期”/组件更新
销毁期/组件销毁
实例化期会涉及到以下生命周期函数(执行顺序自上而下):
beforeCreate:
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created:
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,属性还不可见
beforeMount:
在挂载开始之前被调用:相关的 render 函数首次被调用。属性已经可见,但还是原来的DOM,并非是新创建的。
mouted:
挂载到实例上去之后调用该钩子。注意:mounted 不会把所有的子组件也都一起被挂载。
“生存期”会涉及到以下生命周期函数:
beforeUpdate:
数据更新时,虚拟 DOM 变化之前调用,这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
updated:
数据更新和虚拟 DOM 变化之后调用。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
销毁期会涉及到以下生命周期函数:
beforeDestroy:
实例销毁之前调用,在这一步,实例仍然完全可用。一般在这里移除事件监听器、定时器等,避免内存泄漏
destroyed:
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。