Vue基础—生命周期

Vue的生命周期

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

Vue生命周期的阶段

在 beforeCreate 阶段，vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。在 created 阶段，vue 实例的数据对象 data 有了，el 还没有。

beforeCreate()：在对象初始化之前执行

export default{
    beforeCreate( ){
        // 可以加 loadding 效果
    }
}

created()：在对象创建完成时执行

export default{
    created( ){
        // 结束 loadding 效果
    }
}

在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为 虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成， data.message 成功渲染。

beforeMount()：挂载更新前执行

mounted()：被创建时执行

beforeUpdate()：数据更新前执行

updated()：被更新后执行

在执行 destroy 方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom 结构依然存在

beforeDestroy()：销毁之前执行

destroyed()：销毁之后

keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

activated()：keep-alive组件激活时调用

deactivated()：keep-alive组件停用时调用