VueJS的生命周期

概念

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

生命周期函数

创建期间的生命周期函数
  • beforeCreate:实例初始化后调用,此时实例刚在内存中创建出来,data和methods还没初始化好。
  • created:在实例创建完成后被立即同步调用,实例已在内存中创建好,data和methods已初始化好,此时还没开始编译模板。
  • beforeMount:在挂载开始之前被调用,已完成模板编译,还没挂载到页面上。
  • mounted:实例被挂载后调用,已将编译好的模板挂载到页面指定的容器中显示。
运行期间的生命周期函数
  • beforeUpdate:状态更新前调用,此时data中的值是最新的,但界面上数据还是旧的,还没开始重新渲染DOM节点。
  • updated:实例更新完调用,此时data中的值和界面显示的数据都已更新完成,界面已被重新渲染完成。
销毁期间的生命周期函数
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed:实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 生命周期: 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期...
    东邪_黄药师阅读 261评论 0 5
  • 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)...
    果汁密码阅读 743评论 0 0
  • 组件的整个生命期间,自动调用的特定函数 生命周期的8个钩子函数什么时候用beforeCreate访问不到数据,也访...
    yaya_0623阅读 462评论 0 0
  • vue在生命周期中有这些状态,beforeCreate,created,beforeMount,mounted,b...
    飞扬code阅读 266评论 0 2
  • 实例生命周期钩子 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生...
    Autumn_2460阅读 559评论 0 2