#老雷PHP全栈开发教程#跟着老雷学PHP，快速成为合格的PHPer
为什么要去了解Vue的生命周期？
生命周期就是一些执行的顺序，目前有很多基于vue的开发框架，比如mpvue\uniapp，它们会扩展一些生命周期。通过了解Vue生命周期，我们可以更好的了解这个框架设计思路，我们还可以介入Vue每个执行阶段.使用其它框架时大家也要先去了解一下生命周期。
Vue的生命周期顺序
beforeCreated created beforeMount mounted beforeUpdate updated beforeDestory destoryed
我们可以具体代码执行一次
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><title>Vue</title></head><body><div id="app"><div>{{title}}</div><div>{{pageData.content}}</div><div>{{step}}</div></div><script src=""></script><script>var stepDoing=""; setInterval ( function (){console. log (stepDoing);},1000)var App=new Vue({el:"#app",data:function(){return {title:"三十分钟学会vue的使用",pageData:{},step:"",}},beforeCreate:function(){stepDoing+="beforeCreated "; },created:function(){var that=this;stepDoing+="created ";setTimeout(function(){that.title+="a";},1000)this.getPage();},beforeMount:function(){stepDoing+="beforeMount "; },mounted:function(){stepDoing+="mounted ";},beforeUpdate:function(){stepDoing+="beforeUpdate "; },updated:function(){stepDoing+="updated ";},beforeDestroy:function(){stepDoing+="beforeDestory ";},destroyed:function(){stepDoing+="destoryed ";},onShow:function(){console.log("onShow")},onHide:function(){console.log("onHide")},methods:{getPage:function(){this.pageData.content="这是获取的内容";}}})setTimeout(function(){console.log("desc")App.$destroy()},2000)</script></body></html> 
