vue生命周期函数

1、先来一张图

生命周期函数.png

2、生命周期函数分类

1、创建期间的生命周期函数

beforeCreate():实例刚在内存中被创建出来,此时还没有初始化data和methods属性
create():实例已经在内存中创建OK,data和methods属性已经创建OK,此时还没有开始编译模版。
beforeMout():此时已经完成了模版的编译,但是还没有挂载到页面上去
mounted():此时已经将编译好到模版,挂载到页面指定到容器中显示

2、运行期间到生命周期函数:

beforeUpdate():状态更新之前执行此函数,此时data 的状态是最新的,但是页面上的数据还是旧的,因为此时还没有开始重新渲染DOM节点
update():实例更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据都已经更新完毕,界面已经被重新渲染好了

3、销毁期间的生命周期函数

beforeDestory():实例销毁之前调用,在这一步,实例仍然可用
destoryed():实例销毁之后调用,调用之后,vue实例指示的所有东西都会解绑定,所有事件监听都会被移除,所有子实例都会别销毁

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

推荐阅读更多精彩内容

  • 生命周期函数(钩子)(事件) 生命周期图示 var vm= new Vue表示开始创建一个vue实例 init E...
    2764906e4d3d阅读 1,975评论 0 0
  • beforeCreate 1 .实例初始化之后2 .this指向创建的实例3 .数据观测,event/watche...
    skoll阅读 1,325评论 1 1
  • 先看完函数介绍,在看下面的生命周期函数图示把 beforeCreate 第一个生命周期函数,表示实例完全被创建出来...
    IT小池阅读 899评论 0 13
  • // 生命周期(钩子函数 hook)函数就是vue实例在某一个时间点会自动执行的函数 //此时vue实...
    一夕烟雨阅读 468评论 0 0
  • 前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
    心_c2a2阅读 2,287评论 1 8