Vuejs之路之--對例項生命週期的理解
用Vue框架，熟悉它的生命週期可以讓開發更好的進行。
首先先看看官網的圖，詳細的給出了vue的生命週期:
它可以總共分為8個階段：
beforeCreate（建立前）,
created（建立後）,
beforeMount(載入前),
mounted（載入後）,
beforeUpdate（更新前）,
updated（更新後）,
beforeDestroy（銷燬前）,
destroyed（銷燬後）
然後用一個例項的demo 來演示一下具體的效果：
<div id=app>{{a}}</div>
<script>
var myVue = new Vue({
el: "#app",
data: {
a: "Vue.js"
},
beforeCreate: function() {
console.log("建立前")
console.log(this.a)
console.log(this.$el)
},
created: function() {
console.log("建立之後");
console.log(this.a)
console.log(this.$el)
},
beforeMount: function() {
console.log("mount之前")
console.log(this.a)
console.log(this.$el)
},
mounted: function() {
console.log("mount之後")
console.log(this.a)
console.log(this.$el)
},
beforeUpdate: function() {
console.log("更新前");
console.log(this.a)
console.log(this.$el)
},
updated: function() {
console.log("更新完成");
console.log(this.a);
console.log(this.$el)
},
beforeDestroy: function() {
console.log("銷燬前");
console.log(this.a)
console.log(this.$el)
console.log(this.$el)
},
destroyed: function() {
console.log("已銷燬");
console.log(this.a)
console.log(this.$el)
}
});
</script>
執行後，檢視控制檯，
得到這個：
然後再methods 裡面新增一個change方法：
<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>
點選按鈕之後出現的是：
具體程式碼如下還有個人的理解：
var vm = new Vue({
el:"#container",
data:{
folder:"Vuejs的生命週期究竟是什麼樣子？我真的很想知道！"
},
methods:{
changeData:function(){
this.folder = "馬上就知道了",
this.$el = document.getElementById("dede")
}
},
beforeCreate:function(){
console.log("建立前")
console.log(this)/*返回的就是一個例項物件，為什麼呢，因為根據官網生命週期圖示，
此時已經完成了Vue例項的初始化工作，this指向的是例項物件本身，所以一定會返回值*/
console.log(this.folder)/*undefined，這個為啥呢？同樣的也是根據官網所給出的生命週期圖示，
此時還不沒監控data屬性，所以就更別提裡面的值了*/
},
created:function(){
console.log("建立後");
console.log(this.folder);/*"Vuejs的生命週期究竟是什麼樣子？我真的很想知道！",因為根據官網生命週期的圖
示，建立完成勢力後，此時已經監控到data屬性變化了，當然也就返回真值啦*/
console.log(this.$el)/*undefined，還是同上，在這個階段，勢力還沒檢測到有沒有el屬性，所以也就無法識別$el了*/
},
beforeMount:function(){
console.log("mount(掛載)之前");
console.log(this.folder);/*返回預設值，理由同上*/
console.log(this.$el)/*掛在開始之前被呼叫，（顧名思義還沒掛在上嘛，當然不知道根元素在哪裡，也就也就沒法渲染和轉譯啦）返回真的例項所掛載的dom物件，還是同上，
因為在這個階段之前，已經檢測到了有el屬性所以也就理所當然的返回真值啦。
但此時返回的還是純生的DOM物件，{{folder}}並沒有被轉義，這就更加說明了
例項還沒掛載上呢*/
},
mounted:function(){
console.log("掛載之後");
console.log(this.folder);/*返回預設值，理由同上*/
console.log(this.$el)/*掛載之後，才回呼叫，既然已經掛載上了，那也就知道根元素在哪裡了，當然也就能返回正確的值啊*/
},
beforeUpdate:function(){
console.log("更新之前");
console.log(this.folder);/*資料更新時呼叫，也就是說這個回到函式的觸發是在資料更新的時候執行的，
在這裡就是點選事件發生的時候，因為點選的時候改變了資料的值，但是*/
console.log(this.$el)/*返回的是新的DOM物件，更新過後的*/
},
updated:function(){
console.log("更新之後");
console.log(this.folder);
console.log(this.$el)/*資料更新後呼叫，由於資料更改導致的虛擬 DOM 重新渲染和打補丁，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，
你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之*/
},
beforeDestroy:function(){
console.log("銷燬之前");/*例項銷燬之前呼叫。在這一步，例項仍然完全可用，怎麼讓例項銷燬呢？*/
console.log(this.folder);
console.log(this.$el)
},
destroyed:function(){
console.log("銷燬之後");/*Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。*/
console.log(this.folder);
console.log(this.$el)
}
})這就是vue的生命週期，很簡單吧。