理解VUE生命週期

每個 Vue 例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載例項到 DOM、在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，給予使用者機會在一些特定的場景下新增他們自己的程式碼。

Vue的生命週期分為8個階段：

beforeCreate Vue例項建立前

created 建立後

beforeMount 載入前（在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。該鉤子在伺服器端渲染期間不被呼叫。）

mounted 載入後（el 被新建立的 vm.$el替換，並掛載到例項上去之後呼叫該鉤子。如果 root例項掛載了一個文件內元素，當 mounted 被呼叫時 vm.$el也在文件內。該鉤子在伺服器端渲染期間不被呼叫。）

beforeUpdate 資料更新前（資料更新時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前。） updated 資料更新後 beforeDestroy 銷燬前 destroyed 銷燬後

舉個栗子

HTML:

<div id="app">
	{{test}}
	<button v-on:click='change'>change</button>
</div>
複製程式碼

JS:

var myVue = new Vue({          
	el: "#app",          
	data: {
		test: "生命週期"        
	},  
	methods:{
		change:function(){
			this.test='changed'
		}
	},    
 	beforeCreate: function() {          
		console.log("建立VUE例項前")            
		console.log(this.test)            
		console.log(this.$el)          
	},         
	created: function() {
	    console.log("建立之後");            
		console.log(this.test)  
		console.log(this.$el)          
	},         
	beforeMount: function() {            
		console.log("mount之前")            
		console.log(this.test)            
		console.log(this.$el)          
	},          
	mounted: function() {            
		console.log("mount之後")            
		console.log(this.test)            
		console.log(this.$el)          
	},          
	beforeUpdate: function() {            
		console.log("資料更新前");            
		console.log(this.test)            
		console.log(this.$el)          
	},          
	updated: function() {            
		console.log("資料更新完成");            
		console.log(this.test);            
		console.log(this.$el)          
	},          
	beforeDestroy: function() {            
		console.log("銷燬前");            
		console.log(this.test)            
		console.log(this.$el)            
	},          
	destroyed: function() {           
		console.log("已銷燬");          
		console.log(this.test)          
		console.log(this.$el)          
	}   
});  
複製程式碼

執行後，檢視控制檯，得到這個：

beforeUpdate 、updated 、beforeDestroy 、destroyed並沒有執行，因為沒有觸發。beforeUpdate 、updated 發生在資料更新時。點選change後，再檢視控制檯

也可以在控制檯直接輸入myVue.test='向死而生'回車執行

理解VUE生命週期

Vue的生命週期分為8個階段：

舉個栗子

相關文章