Vue实例的生命周期

什么是生命周期

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。

生命周期钩子

• 生命周期事件的别名
• 生命周期钩子 = 生命周期函数 = 生命周期事件

主要的生命周期函数分类

• 创建期间的生命周期函数

  • beforeCreate

    实例刚在内存中被创建出来，此时还没有初始化好data和methods属性。只有默认的生命周期函数和默认的事件

  • created

    实例在内存中已创建ok，data和method已创建ok。此时还没有开始编译模版

  • beforeMount

    此时已经完成了模版的编译，但是还没有挂载到页面中

  • mounted

    此时已经将编译好的模版挂载到了页面指定的容器中使用

• 运行期间的生命周期函数

  • beforeUpdate

    状态更新之前执行此函数，此时data的状态是最新的，但是页面上显示的数据还是旧的，此时还没有重新渲染DOM节点

  • updated

    实例更新完毕后调用此函数，此时data的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染完毕

• 销毁期间的生命周期函数

  • beforeDestroy

    实例销毁之前调用，在这一步，实例依然完全可用

  • destroyed

    Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁