VUE生命周期全面系統詳解

Posted on by

什麼是生命周期

每個組件在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數

生命周期的作用

  • 創建後發起axax請求
  • 掛載後操作dom
  • 添加事件監聽
  • 銷毀前移除間隔調用,事件監聽
  • 說明:並不是每個生命周期都必須使用

vue生命周期有哪些

如下圖(記不住就抄八百遍)

Vue 生命周期總共分為幾個階段

Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化 數據、編譯模板、掛載 Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這 是 Vue 的生命周期。

創建前後

1）beforeCreate創建前

在實例初始化之後，數據觀測 (data observer) 和 event/watcher 事件配 置之前被調用。

特點: 有this,沒有data,methods,dom節點

beforeCreate() {
			// 創建前,有this,沒有data,methods,dom節點
			console.log("beforeCreate",this.num ,this)
		},

2）created創建後

在實例創建完成後被立即調用。在這一步，實例已完成以下的配置：數據觀 測 (data observer)， 屬性和方法的運算，watch/event 事件回調。然而，掛 載階段還沒開始，$el 屬性目前不可見。

特點:有this,沒有$els,dom節點

用處:發起ajax請求,開啟定時器,監聽事件(window)

created() {
			// 創建完畢,有data,沒有el
			console.log("created",this.num ,this.$el)
			// 作用發起ajax請求,開啟定時器,監聽事件(window)
			// 開啟定時器
			this.stopId = setInterval(() => {
				this.num++;
				console.log("滴答")
			}, 1000)
			// 監聽事件
			window.addEventListener("resize",this.showWin)
		},

掛載前後

3）beforeMounte掛載前

特點: 有$el,沒有渲染數據

在掛載開始之前被調用：相關的 render 函數首次被調用。

		beforeMount() {
			// dom掛載前,有el,沒有渲染數據
			// beforeMount 訪問&el 為什麼是 undefined
			// 因為使用的腳手架,動態更新造成的(在非腳手架狀態下可以)
			console.log("beforeMount", this, document.querySelector("#btn"))
		},

4）mounted掛載後

特點: 有dom節點,數據也渲染

用處: 操作dom節點,發起ajax請求,開啟定時器,監聽事件, el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載瞭一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

		mounted() {
			// 掛載完畢
			console.log("*mounted", this, document.querySelector("#btn"))
			// this 當前組件的實例
			// this.$el 當前組件的dom節點
			// this.num當前組件的 屬性
			// console.log(this,this.$el,"組件的實例this",this.num)
			// 作用:作用發起ajax請求,開啟定時器,監聽事件,操作dom節點
		},

更新前後

5）beforeUpdate更新前

特點: 會執行多次,數據更新,dom節點沒有更新

數據更新時調用，發生在虛擬 DOM 打補丁之前。這裡適合在更新之前訪問 現有的 DOM，比如手動移除已添加的事件監聽器。該鉤子在服務器端渲染期間不 被調用，因為隻有初次渲染會在服務端進行。

		// 更新前後
		beforeUpdate() {
			// 組件的更新前,數據更新,視圖沒有更新
			console.log("beforeUpdate", this.num, document.querySelector("#btn").innerText)
		},

6）updated更新後

特點: 會執行多次,數據更新,dom節點也更新

由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。

		updated() {
			// 組件更新後,數據更新,視圖已經更新
			console.log("updated", this.num, document.querySelector("#btn").innerText)
		},

銷毀前後

7）beforeDestroy銷毀前

特點: 數據更新,視圖沒有更新

用處:移除事件監聽,停止計時器

實例銷毀之前調用。在這一步，實例仍然完全可用。該鉤子在服務器端渲染 期間不被調用。

		// 卸載前後
		beforeDestroy() {
			// 結束定時器
			clearInterval(this.stopId);
			//移除事件監聽
			window.removeEventListener("resize", this.showWin)
			// 數據可以更新,視圖已經不響應
			// this.num++;
			// console.log( "卸載前","beforeDestroy")
			// alert("卸載前")
		},

8）destroyed銷毀後

特點: 沒有this,切換視圖與vue實例的聯系

Vue 實例銷毀後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有 的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間 不被調用。

		destroyed() {
			// 切斷視圖與vue實例的聯系
			// this.num++;
			console.log("卸載後", "destroyed")
		}

效果如下:

問題

第一次加載頁面會觸發哪幾個鉤子函數？

當頁面第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子函數

到此這篇關於VUE生命周期全面系統詳解的文章就介紹到這瞭,更多相關VUE生命周期內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：