vue实例的生命周期

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

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

  • vue 生命周期图


    vue生命周期图
  • 主要的生命周期分类:

    • 创建期间的生命周期函数:
      beforeCreate:刚初始化了一个Vue空的实例对象,这个对象身上,只有默认的一些生命周期函数和默认的事件,data和methods还没有初始化
      created: data和methods已经初始化完成,此时还没有开始编译模板
      beforeMount: 此时已经完成了模板的编译,但是还没有挂载到页面中
      mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
    • 运行期间的生命周期函数: (data变化时执行)
      beforeUpdate:状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有重新渲染DOM节点
      updated:实例更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据都已经完成了更新,界面已经被重新渲染好了
    • 销毁期间的生命周期函数
      beforeDestroy:实例销毁之前调用,在这一步,实例任然完全可用,此时,还没有真正执行销毁的过程:
      destroyed:Vue实例销毁后调用,实例已经被完全被销毁,此时,组件中所有的数据、方法、指令等都已经不可用了
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容