Vue生命周期

Vue实例有一个完整的生命周期,也就是从开始创建,初始化数据,编译模板,挂载DOM,渲染–>更新–>渲染,销毁等一系列过程,也就是Vue实例从创建到销毁的过程,就是生命周期。

创建阶段

1.beforeCreate(){}//这是一个vue实例的第一个生命周期函数,在这个阶段,vue实例上的data中的数据和methods中的方法都不可以使用。
2.created(){}//这是一个vue实例的第二个生命周期函数,要想使用vue实例上的data中的数落和methods中的方法,最早只能够在此阶段。在这里更改数据不会触发updated函数。
3.beforemount(){}//这是一个vue实例的第三个生命周期函数,在此阶段,已经在内存中生成了虚拟DOM树,但是尚未挂载到页面上,所以,此时页面上的元素中的数据还没有真正的替换过来,所以里面的内容还是之前写的插值表达式。
4.mounted(){}//这是一个vue实例的第四个生命周期函数,也是vue实例创建阶段的最后一个生命函数,在这个阶段,模板已经挂载到了页面上,数据也进行了替换,不再是插值表达式。如果想要操作DOM元素,最早可在该阶段进行。

运行阶段

1.beforeUpdate(){}//这是运行阶段的第一个生命周期函数,在vue实例中data中的数据发生改变的时候才会触发,但是,在这个阶段,虽然data中的数据已经改变,页面中的数据还是尚未改变的数据,此时,页面还没有同步新的数据。
2.updated(){}//但是,在这个阶段,data中的数据已经改变,页面中的数据已经改变,此时,页面已经同步新的数据。

销毁阶段

1.beforeDestory(){}//在这个阶段,vue实例中的data中的数据和methods中的方法尚可以使用。
2.destoryed(){}//在这个阶段,vue实例已经被销毁了。解绑它的全部指令及事件监听器,并不会清除data的数据或者清除dom。

  转载请注明: TomoFur Vue生命周期

 上一篇
重排和重绘 重排和重绘
浏览器的运行机制: 构建DOM树:渲染引擎解析HTML文档,首先将标签转换为DOM树中的DOM节点(包括js生成的标签),生成DOM树 构建渲染树:解析对应的CSS样式文件信息(包括js生成的样式和外部CSS文件),构建渲染树。 布局渲染树
2019-07-01
下一篇 
消除浮动 消除浮动
当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素的位置会发生错误。因此要消除由于浮动而产生的不利影响。 额外标签法在最后一个浮动元素后面添加标签 <div class='content'> <div class='c
2019-06-24
  目录