什么是生命周期

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

生命周期的作用

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

vue生命周期有哪些

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

Vue 生命周期總共分為幾個(gè)階段

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

創(chuàng)建前后

1）beforeCreate創(chuàng)建前

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

特點(diǎn): 有this,沒(méi)有data,methods,dom節(jié)點(diǎn)

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

2）created創(chuàng)建后

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

特點(diǎn):有this,沒(méi)有$els,dom節(jié)點(diǎn)

用處:發(fā)起ajax請(qǐng)求,開(kāi)啟定時(shí)器,監(jiān)聽(tīng)事件(window)

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

掛載前后

3）beforeMounte掛載前

特點(diǎn): 有$el,沒(méi)有渲染數(shù)據(jù)

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

		beforeMount() {
			// dom掛載前,有el,沒(méi)有渲染數(shù)據(jù)
			// beforeMount 訪(fǎng)問(wèn)&el 為什么是 undefined
			// 因?yàn)槭褂玫哪_手架,動(dòng)態(tài)更新造成的(在非腳手架狀態(tài)下可以)
			console.log("beforeMount", this, document.querySelector("#btn"))
		},

4）mounted掛載后

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

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

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

更新前后

5）beforeUpdate更新前

特點(diǎn): 會(huì)執(zhí)行多次,數(shù)據(jù)更新,dom節(jié)點(diǎn)沒(méi)有更新

數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪(fǎng)問(wèn) 現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽(tīng)器。該鉤子在服務(wù)器端渲染期間不 被調(diào)用，因?yàn)橹挥谐醮武秩緯?huì)在服務(wù)端進(jìn)行。

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

6）updated更新后

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

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

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

銷(xiāo)毀前后

7）beforeDestroy銷(xiāo)毀前

特點(diǎn): 數(shù)據(jù)更新,視圖沒(méi)有更新

用處:移除事件監(jiān)聽(tīng),停止計(jì)時(shí)器

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

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

8）destroyed銷(xiāo)毀后

特點(diǎn): 沒(méi)有this,切換視圖與vue實(shí)例的聯(lián)系

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

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

效果如下:

問(wèn)題

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

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

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

最新評(píng)論