Vue实例的生命周期

什么是生命周期

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

生命周期钩子

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

主要的生命周期函数分类

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

    • beforeCreate

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

    • created

      实例在内存中已创建ok,datamethod已创建ok。此时还没有开始编译模版

    • beforeMount

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

    • mounted

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

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

    • beforeUpdate

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

    • updated

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

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

    • beforeDestroy

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

    • destroyed

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

Kommentare