昨天简单介绍了一下生命周期是什么,以及生命周期的几个阶段,今天具体介绍一下生命周期各个阶段都是干什么的叭!

  beforeCreate(创建前):

   当前生命周期函数主要做初始化工作,可以创建一个loading。

  Created(创建后*****):

     1.当前生命周期函数中我们可以访问到vm身上所有的属性和方法

   2.当前生命周期函数会将data中所有属性和方法都挂载到vm的实例身上

   3.当前生命周期会给所有data对象里的属性添加getter/setter方法,因此如果需要进行前后端数据交互时必在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行绑定,这个属性身上不会有getter/setter方法,这个数据也无法动态得进行改变

  beforeMount(挂载前):

   1.在这个生命周期中,数据和模板还没有进行相结合

   2.在这个生命周期中可以对数据进行最后的修改(第一次显示在浏览器中的数据,update之前的数据)

   3.当前生命周期中获取不到真实的DOM结构

  Mounted(挂在后):

   1.在这个生命周期中数据和模板已经结合,可以通过this.$refs获取到真正的DOM结构($refs:ref="值必须在DOM中唯一",ref是给DOM元素添加的属性)

    补充:ref和document的区别:document从整个页面找DOM元素(已插入到页面),ref是从当前vue的虚拟DOM中找到的当前元素(虚拟DOM参见https://www.cnblogs.com/gaosong-shuhong/p/9253959.html),是从内存中找到的DOM结构(虚拟DOM是真实的JS对象,可放在内存中,访问内存的速度比访问页面元素快得多)

   2.在这个生命周期中可以做一些new操作

  beforeUpdate(更新前):

   1.当data中的数据发生改变时才会执行这个周期中的函数

   2.可以对数据进行最后的修改(更新后的数据)

   3.可以访问到真实的DOM结构

   4.当前生命周期中的数据和模板还没有更新完毕

  Updated(更新后):

   1.可以访问到数据更新后最新的DOM结构

   2.当前生命周期函数会被频繁触发,因此在当前周期做事件绑定或实例化时,要提前做判断,否则会导致内存泄露.

  beforeDestory(销毁前*):

   在这个生命周期函数中可以访问真实DOM结构和data中的数据,一般在这个声明周期函数中做解绑/移除操作。

  Destoryed(销毁后):

   1.将DOM与数据间的关联进行断开

   2.在当前生命周期函数中访问不到真实的DOM结构    

  以上生命周期函数中,多次执行的有:beforeUpdate,Updated.

  组件第一次创建的时候会执行beforeCreate,Created,beforeMount,Mounted。

  本文介绍了生命周期各个阶段都是干嘛的,接下来再撸一篇文章详细介绍每个阶段的代码,并对每个阶段进行解剖式分析,波波(●´З`●)