標註圖+部分舉例聊聊Vue生命週期

Sadhu發表於2018-10-29
Vue

“你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。”
現在專案中遇到了，好好回頭總結一波Vue生命週期，以後用到的時候再來翻翻。

啥叫Vue生命週期？

每個 Vue 例項在被建立時都要經過一系列的初始化過程。
例如：從開始建立、初始化資料、編譯模板、掛載Dom、資料變化時更新DOM、解除安裝等一系列過程。
我們稱 這一系列的過程 就是Vue的生命週期。
通俗說就是Vue例項從建立到銷燬的過程，就是生命週期。
同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會，利用各個鉤子來完成我們的業務程式碼。

啥也不說，先來個乾貨

這是對於Vue生命週期，官網給的那張圖的標註圖，圖片網上看到的，我覺得標註地很nice，建議一步步仔細看完圖片，然後把圖片自己悄悄儲存下來，對照著圖片的內容看第二部分的舉例說明。

標註圖+部分舉例聊聊Vue生命週期

我相信程式設計師看程式碼比看文字更容易理解

對照著上圖示註的內容，我們一個鉤子一個鉤子地舉例說明。

1.beforeCreate

例項初始化之後、建立例項之前的執行的鉤子事件。
如下例子：

<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
	const vm = new Vue({
		el: '#root',
		data: {
			test: '天王蓋地虎'
		},
		beforeCreate() {
			console.log('beforeCreate鉤子事件：');
			console.log(this.$data);
			console.log(this.$el);
		}
	})
</script>
</body>
複製程式碼

得到的結果是：

標註圖+部分舉例聊聊Vue生命週期
小總結：建立例項之前，資料觀察和事件配置都沒好準備好。也就是資料也沒有、DOM也沒生成。

2.created

例項建立完成後執行的鉤子
在上一段程式碼例子中，我們再來console一下。

<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
	const vm = new Vue({
		el: '#root',
		data: {
			test: '天王蓋地虎'
		},
		created() {
			console.log('created鉤子事件：');
			console.log(this.$data);
			console.log(this.$el);
		}
	})
</script>
</body>
複製程式碼

得到的結果是：

標註圖+部分舉例聊聊Vue生命週期
小總結：例項建立完成後，我們能讀取到資料data的值，但是DOM還沒生成，掛載屬性el還不存在。

3.beforeMount

將編譯完成的html掛載到對應的虛擬DOM時觸發的鉤子
此時頁面並沒有內容。
即此階段解讀為: 即將掛載
我們列印下此時的$el

beforeMount() {
			console.log('beforeMount鉤子事件：');
			console.log(this.$el);
		}
複製程式碼

得到的結果是：

標註圖+部分舉例聊聊Vue生命週期
小總結：此時的el不再是undefined,成功關聯到我們指定的dom節點。但是此時的{{test}}還沒有成功渲染成data中的資料，頁面沒有內容。
PS：相關的render函式首次被呼叫。

4.mounted

編譯好的html掛載到頁面完成後所執行的事件鉤子函式。
此時的階段解讀為： 掛載完畢階段
我們再列印下此時$el看看：

mounted() {
			console.log('mounted鉤子事件：');
			console.log(this.$el);
		}
複製程式碼

得到的結果是：

標註圖+部分舉例聊聊Vue生命週期
可見， {{test}}已經成功渲染成data裡面test對應的值“天王蓋地虎”了。
小總結：此時編譯好的HTML已經掛載到了頁面上，頁面上已經渲染出了資料。一般會利用這個鉤子函式做一些ajax請求獲取資料進行資料初始化。
PS：mounted在整個例項中只執行一次。

5.beforeUpdate

小總結：當修改vue例項的data時，vue就會自動幫我們更新渲染檢視，在這個過程中，vue提供了beforeUpdate的鉤子給我們，在檢測到我們要修改資料的時候，更新渲染檢視之前就會觸發鉤子beforeUpdate。

6.updated

小總結：此階段為更新渲染檢視之後，此時再讀取檢視上的內容，已經是最新的內容。
PS:
1、該鉤子在伺服器端渲染期間不被呼叫。
2、應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。

7.beforeDestroy

小總結：呼叫例項的destroy( )方法可以銷燬當前的元件，在銷燬前，會觸發beforeDestroy鉤子。

8.destroyed

小總結：成功銷燬之後，會觸發destroyed鉤子，此時該例項與其他例項的關聯已經被清除，Vue例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。

話在最後

其實還有三個生命週期鉤子沒列出來：activated、deactivated、errorCaptured。這三個大家遇到了自行了解哈,暫且這樣吧。

相關文章