VUE教程(第五节)

这一篇来说说vue的生命周期,什么叫生命周期呢,就是从出生到毁灭的过程咯,也就是记录运行轨迹的意思咯。

比如人从出生开始,到了4、5岁就要送到幼儿园去调教,因为这时候是最好学习能力的时候,vue也有对应的从创建到毁灭,一共有10个点,看看图,来点干涩的东西:

八大周期

咦~~说好的10个呢?怎么打了八折,其实剩余两个是:

actived和deactivated啦,是在keep-alive组件被激活的时候调用,和keep-alive组件被停用的时候调用,因为涉及keep-alive的用法,所以这里就不细说。

为了避免填鸭式学习(懒就是懒,有时候还是需要找个冠冕堂皇的理由),我这里只演示created和mounted这两个生命周期,

——》created,是指当数据加载完毕时候,但是dom还没有创建时候执行的函数,我们在开发过程中很多时候是需要和后台交互的,我们可以在data里面设定一些默认值,但是更多时候我们其实是想当数据返回了时候再显示出页面,让用户看到的第一眼就是渲染好的页面,而不是数据有变化,然后页面的数据从默认值到后台获取到的值,所以这时候我们一般把数据获取的函数在此生命周期里面启动:

——》mounted,是指dom加载完毕时候的执行函数,这时候的页面是完整的,特别是注意这时候的dom结构已经有了,对于喜欢操作dom的童鞋,这时候你就可以展开你的手脚,把dom揉捏成长短高圆胖瘦了;

好了,来个代码吧,文字永远是干涩难懂的,一行代码抵过千言万语:

周期代码
周期效果

其中this.data是可以获取到我们定义的那个data值的,然后this.$el是获取组件的dom元素,在created阶段是有数据,但是还没有渲染dom所以获取时候是undefined的,在mounted阶段是已经渲染dom结构完毕时候执行的函数,这样是不是更明了了。其他的周期函数也是一样的调用,只是在不同阶段调用而已罢了,小伙伴在自己可爱的小电脑上可以点一点,完美、安排!

喜欢的朋友可以关注我,一起成长哦!

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

推荐阅读更多精彩内容

  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 13,260评论 1 52
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 10,748评论 0 11
  • 前言 记录平时学到的知识,标题写的大气一点,也算是给自己一点鼓励,希望在技术这条路可以远走越远,路越走越宽~ 文中...
    徐国军_plus阅读 5,579评论 3 28
  • 一、什么是MVVM? MVVM是一个model+view+viewModel框架。MVVM是一种设计思想。Mode...
    花开有声是我阅读 8,765评论 1 79
  • 经年几许 一路安好,却碌碌无为 经年几许 似醒非醒,看人生百态 经年几许 或喜或悲,懂冷暖自知 一去经年,怎可重来...
    青梅小阅读 1,508评论 0 3