这一篇来说说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结构完毕时候执行的函数，这样是不是更明了了。其他的周期函数也是一样的调用，只是在不同阶段调用而已罢了，小伙伴在自己可爱的小电脑上可以点一点，完美、安排！
喜欢的朋友可以关注我，一起成长哦！
公众号
网友评论