1. 程式人生 > >vue的生命週期學習筆記

vue的生命週期學習筆記

Vue的生命週期函式有8個,分別是:beforeCreate,   created,   beforeMount,   mounted,   beforeUpdated,   updated,   beforeDestroy,   destroyed.   下面是個人的一些總結。

  • beforeCreate   在它之前剛初始化了一個空的vue例項物件,在這個階段,例項物件身上只有預設的一些生命 周期函式和預設的事件,其他的東西都未建立,在這個生命週期執行的 時候,data和methods中的資料都還沒有初始化  
    <div id="app"></div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				msg: "hello"
			},
			methods: {
				show() {
					console.log("我是show方法")
				}
			},
			beforeCreate() {
				console.log(this.msg)
				this.show()
			}
		})
	</script>

 

不知什麼原因,程式碼編輯器用不了,改為圖片

 

 從控制檯輸出的結果看,h1中的內容原本是hello的,但在這個階段卻是 {{ msg }} ,由此說明在 beforeMount 階段模板還沒有被真正替換過來,只是之前寫的一些模板字串

 

  • created   在created中,data和methods等都已經被初始化好了,所以如果要用到methods中的方法或者操作data中的資料,最早只能在created中操作 
  • beforeMount   接著下來,vue開始編輯模板,執行vue的程式碼,最終會在記憶體中生成一個編譯好的最終模板字串,緊接著渲染為記憶體中的DOM,也就是說,此函式在執行的時候,只是在記憶體中渲染好了模板,而沒有把模板掛載到真正的頁面中去
    ,這個階段,頁面還是舊的
  • mounted   這個時候已經將在記憶體中編譯好的模板,真正的替換到瀏覽器的頁面中去,如果要操作頁面上的DOM節點,最早要在mounted中進行。只要執行完了mounted,就表示整個vue例項已經初始化完畢了。此時,元件已經脫離了建立階段,進入到了執行階段 

元件執行階段的生命週期函式只有兩個,beforeUpdate和updated,這兩個事件會根據data資料的改變,有選擇的觸發0次或者多次。

 從控制檯輸出的結果看,這個階段資料已經被更新了,但是我們的介面還沒有被更新 

  • beforeUpdate   當執行beforeUpdate的時候,頁面中顯示的資料還是舊的,不過這個時候data中的資料是最新的,頁面尚未和最新的資料保持同步
  • updated   到達這個時候,會先根據data中最新的資料, 在記憶體中重新渲染出一份最新的DOM樹,更新完後緊接著把這份最新的DOM樹重新渲染到真實的頁面中去,這樣就完成了data(model層)到view(檢視層)的更新。updated事件執行的時候,頁面和data中的資料已經保持同步了,都是最新的了
  • beforeDestroy   當執行beforeDestroy的時候,vue例項就已經從執行階段,進入到了銷燬階段。這個時候例項身上的data和methods以及component等等都處於可用狀態,還沒有真正執行銷燬的過程
  • destroyed   當執行到destroyed函式的時候,元件已經被完全銷燬了,此時元件中的data,methods等等都已經不可用了