[TOC] ## 前言 如果你想對vue有比較好的使用和進一步拓展，那么vue組件的生命周期是必須清楚的。其中生命周期的鉤子函數就是給你一些不同周期階段的回調函數而已。 ## 圖解生命周期   ## 代碼各個階段 ~~~ var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, //數據沒有 元素沒有 beforeCreate:function(){ console.log("創建前========") console.log(this.data) console.log(this.$el) }, //數據有 元素沒有 created:function(){ console.log("已創建========") console.log(this.info) console.log(this.$el) }, //數據有 元素有 虛擬dom beforeMount:function(){ console.log("mount之前========") console.log(this.info) console.log(this.$el) }, //數據有 元素有，真實dom mounted:function(){ console.log("mounted========") console.log(this.info) console.log(this.$el) }, beforeUpdate:function(){ console.log("更新前========"); }, updated:function(){ console.log("更新完成========"); }, beforeDestroy:function(){ console.log("銷毀前========") console.log(this.info) console.log(this.$el) }, destroyed:function(){ console.log("已銷毀========") console.log(this.info) console.log(this.$el) } }) ~~~ ## 使用建議 * beforeCreate :加載loading事件 * created :結束loading，還做一些初始化，實現函數自執行 * mounted :在這發起axios請求，拿回數據，配合路由鉤子做一些事情 * beforeDestory： destoryed :當前組件已被刪除，清空相關內容 綜上：建議你吧頁面進入出現加載框寫在beforeCreate,請求接口數據寫在created,