什么是生命周期

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

生命周期的作用

• 創(chuàng)建后發(fā)起axax請求
• 掛載后操作dom
• 添加事件監(jiān)聽
• 銷毀前移除間隔調(diào)用,事件監(jiān)聽
• 說明:并不是每個生命周期都必須使用

vue生命周期有哪些

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

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

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

創(chuàng)建前后

1）beforeCreate創(chuàng)建前

在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配 置之前被調(diào)用。

特點: 有this,沒有data,methods,dom節(jié)點

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

2）created創(chuàng)建后

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

特點:有this,沒有$els,dom節(jié)點

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

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

掛載前后

3）beforeMounte掛載前

特點: 有$el,沒有渲染數(shù)據(jù)

在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

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

4）mounted掛載后

特點: 有dom節(jié)點,數(shù)據(jù)也渲染

用處: 操作dom節(jié)點,發(fā)起ajax請求,開啟定時器,監(jiān)聽事件, el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子。如果 root 實例掛載了一個文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。

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

更新前后

5）beforeUpdate更新前

特點: 會執(zhí)行多次,數(shù)據(jù)更新,dom節(jié)點沒有更新

數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問 現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。該鉤子在服務(wù)器端渲染期間不 被調(diào)用，因為只有初次渲染會在服務(wù)端進(jìn)行。

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

6）updated更新后

特點: 會執(zhí)行多次,數(shù)據(jù)更新,dom節(jié)點也更新

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會調(diào)用該鉤子。

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

銷毀前后

7）beforeDestroy銷毀前

特點: 數(shù)據(jù)更新,視圖沒有更新

用處:移除事件監(jiān)聽,停止計時器

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

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

8）destroyed銷毀后

特點: 沒有this,切換視圖與vue實例的聯(lián)系

Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有 的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間 不被調(diào)用。

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

效果如下:

問題

第一次加載頁面會觸發(fā)哪幾個鉤子函數(shù)？

當(dāng)頁面第一次頁面加載時會觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個鉤子函數(shù)

到此這篇關(guān)于VUE生命周期全面系統(tǒng)詳解的文章就介紹到這了,更多相關(guān)VUE生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論