vue生命週期示意圖

vue生命週期示意圖

Vue在實例化的過程中，會調 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed ，些生命週期的鉤子，給我們提供了執行自定義邏輯的機會。：

1. beforeCreate ：
   • （更新前）數據還沒有監聽，沒有綁定到vue對象實例，同時也沒有掛載對象(實例剛剛創建，數據檢測和事件初始化都未開始)；
2. **created ** ：
   • （創建後） 完成數據觀測，屬性和方法的運算，初始化事件，$屬性還沒有顯示出來（載入前）在掛載開始之前被調用，相關的函數首次被調用。實例已完成以下的配置：編譯模板，把裏面的數據和模板生成。注意此時還沒有掛載到頁面上。（載入後）在被新創建的el屬性還沒有顯示出來
3. ** beforeMount **:
   • (載入前） 在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時還沒有掛載html到頁面上。此時打印this.$el 輸出的是節點(模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的 $el屬性，$el屬性是一個HTMLElement對象，也就是這個階段，vue實例通過原生的createElement等方法來創建這個html片段，準備注入到我們vue實例指明的el屬性所對應的掛載點(模板編譯完成，有一個虛擬DOM節點)
4. mounted:
   • (載入後）將$(el).的內容掛載到了el，相當於我們在jquery執行了$(el).html($el),生成頁面上真正的dom，上面我們就會發現dom的元素和我們$el的元素是一致的。在此之後，我們能夠用方法來獲取到el元素下的dom對象，並進 行各種操作；(替換或者插入DOM,形成真實的DOM節點)
5. **beforeUpdate **(數據改變，但視圖還沒更新)
   • （更新前） 在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。數據改變,但是還沒有渲染的時候
6. updated：
   • 視圖更新完成；
7. beforeDestroy：
   • watchers、組件和事件監聽器銷燬之前；
8. destroyed：
   • 銷燬完成；

代碼實例

// An highlighted block
<div id="app">{{a}}</div>
 
var myVue = new Vue({
    el: "#app",
    data: {
    	a: "HelloWord"
    },
    beforeCreate: function() {
    	console.log("創建前")
	console.log(this.a) //undefined
	console.log(this.$el) //undefined
    },
    created: function() {
	console.log("創建之後");
	console.log(this.a) //HelloWord
	console.log(this.$el) //undefined
    },
    beforeMount: function() {
	console.log("mount之前")
	console.log(this.a) //HelloWord
	console.log(this.$el) //<div id="app">{{a}}</div>
    },
    mounted: function() {
	console.log("mount之後")
	console.log(this.a) //HelloWord
	console.log(this.$el) //<div id="app">HelloWord</div>
    },
    beforeUpdate: function() {
	alert("更新前");
	console.log(this.a) //Welcome to Vue,頁面上顯示的還是老的數據
    },
    updated: function() {
	console.log("更新完成");
	console.log(this.a) //Welcome to Vue，頁面上更新爲新數據
    },
    beforeDestroy: function() {
	console.log("銷燬前");
	console.log(this.a) //Welcome to Vue
	console.log(this.$el) //<div id="app">Welcome to Vue</div>
    },
    destroyed: function() { 
	console.log("已銷燬");
	console.log(this.a) //Welcome to Vue
	console.log(this.$el) //<div id="app">Welcome to Vue</div>
    }
});
setTimeout(function(){
	myVue.a = "Welcome to Vue";
},500)
setTimeout(function(){
	myVue.$destroy();
},1000)
setTimeout(function(){
	alert("再次改變 a 的值")
	myVue.a = "HelloWord";
},1500)

注意點：

1、beforeMount實例化之前 data是a的值：HelloWord、DOM節點是虛擬的，就是先佔了個坑（即

{{a}}

）

2、$destroy這個方法銷燬的是監聽器，而不是視圖，也就是說之後視圖不再受vue控制