vue3生命周期函數(shù)更改了幾個(gè)

這篇文章主要介紹“vue3生命周期函數(shù)更改了幾個(gè)”，在日常操作中，相信很多人在vue3生命周期函數(shù)更改了幾個(gè)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”vue3生命周期函數(shù)更改了幾個(gè)”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元安國做網(wǎng)站,已為上家服務(wù),為安國各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

vue3改了4個(gè)生命周期函數(shù)。Vue3組合式api取消了beforeCreated和created鉤子函數(shù)，采用steup鉤子代替，且里面不能使用this。Vue3里面的組件銷毀的鉤子函數(shù)由destroyed和beforeDestroy換成了beforeUnmount和unmounted。

Vue實(shí)例有一個(gè)完整的生命周期，也就是從new Vue()、初始化事件(.once事件)和生命周期、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載等?系列過程，稱這是Vue的生命周期。

vue應(yīng)用程序中有4個(gè)主要事件(8個(gè)鉤子)：
創(chuàng)建 ---- 在組建創(chuàng)建時(shí)執(zhí)行
掛載 ---- DOM被掛載時(shí)執(zhí)行
更新 ---- 當(dāng)響應(yīng)數(shù)據(jù)被修改時(shí)執(zhí)行
銷毀 ----在元素被銷毀之前立即執(zhí)行

Vue2的生命周期

vue3生命周期函數(shù)更改了幾個(gè)

（1） beforeCreate（創(chuàng)建前)

數(shù)據(jù)監(jiān)測(getter和setter)和初始化事件還未開始，此時(shí) data 的響應(yīng)式追蹤、
event/watcher 都還沒有被設(shè)置

不能訪問到data、computed、watch、methods上的方法和數(shù)據(jù)。

（2）created（創(chuàng)建后)

創(chuàng)建完成后會(huì)自動(dòng)執(zhí)行函數(shù)

（3） beforeMount（掛載前）

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

這次Vue開始解析模板，生成虛擬DOM存在內(nèi)存中，還沒有把虛擬DOM轉(zhuǎn)換成真實(shí)DOM，插入頁面中

（4）mounted（掛載后）

在el被新創(chuàng)建的 vm.$el（就是真實(shí)DOM的拷貝）替換，并掛載到實(shí)例上去之后調(diào)用（將內(nèi)存中的虛擬DOM轉(zhuǎn)為真實(shí)DOM，真實(shí)DOM插入頁面）。

一般在這個(gè)階段進(jìn)行：開啟定時(shí)器，發(fā)送網(wǎng)絡(luò)請(qǐng)求，訂閱消息，綁定自定義事件等等

（5）beforeUpdate（更新前）

響應(yīng)式數(shù)據(jù)更新時(shí)調(diào)用，此時(shí)雖然響應(yīng)式數(shù)據(jù)更新，但是對(duì)應(yīng)的真實(shí) DOM 

還沒有被渲染（數(shù)據(jù)是新的，但頁面是舊的，頁面和數(shù)據(jù)沒保持同步呢）。

（6）updated（更新后）

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

調(diào)用時(shí)，組件 DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)

（7）beforeDestroy（銷毀前）

實(shí)例銷毀之前調(diào)用

在這個(gè)階段一般進(jìn)行關(guān)閉定時(shí)器，取消訂閱消息，解綁自定義事件。

（8）destroyed（銷毀后）

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

<!DOCTYPE html><html>
	<head>
		<meta charset="UTF-8" />
		<title>分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 準(zhǔn)備好一個(gè)容器-->
		<div id="root" :x="n">
			<h3 v-text="n"></h3>
			<h3>當(dāng)前的n值是：{{n}}</h3>
			<button @click="add">點(diǎn)我n+1</button>
			<button @click="bye">點(diǎn)我銷毀vm</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。

		new Vue({
			el:'#root',
			// template:`
			// 	<div>
			// 		<h3>當(dāng)前的n值是：{{n}}</h3>
			// 		<button @click="add">點(diǎn)我n+1</button>
			// 	</div>
			// `,
			data:{n:1},
			methods: {
				add(){
					console.log('add')
					this.n++
				},
				bye(){
					console.log('bye')
					this.$destroy()
				}
			},
			watch:{
				n(){
					console.log('n變了')
				}
			},
			beforeCreate() {
				console.log('beforeCreate')
			},
			created() {
				console.log('created')
			},
			beforeMount() {
				console.log('beforeMount')
			},
			mounted() {
				console.log('mounted')
			},
			beforeUpdate() {
				console.log('beforeUpdate')
			},
			updated() {
				console.log('updated')
			},
			beforeDestroy() {
				console.log('beforeDestroy')
			},
			destroyed() {
				console.log('destroyed')
			},
		})
	</script></html>

常用的生命周期鉤子：
1.mounted: 發(fā)送ajax請(qǐng)求、啟動(dòng)定時(shí)器、綁定自定義事件、訂閱消息等【初始化操作】。
2.beforeDestroy: 清除定時(shí)器、解綁自定義事件、取消訂閱消息等【收尾工作】
關(guān)于銷毀Vue實(shí)例:
(1)銷毀后借助Vue開發(fā)者工具看不到任何信息。
(2)銷毀后自定義事件會(huì)失效，但原生DOM事件依然有效。
(3)一般不會(huì)在beforeDestroy操作數(shù)據(jù)，因?yàn)榧幢悴僮鲾?shù)據(jù)，也不會(huì)再觸發(fā)更新流程了。

Vue3的生命周期

vue3生命周期函數(shù)更改了幾個(gè)

（1） onBeforeMount

在掛載之前被調(diào)用，渲染函數(shù)render首次被調(diào)用

（2） onMounted

組件掛載時(shí)調(diào)用

（3） onBeforeUpdate

數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前。

（4） onUpdated

因數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁時(shí)調(diào)用

（5） onBeforeUnmount

在卸載組件實(shí)例之前調(diào)用，此階段的實(shí)例依舊是正常的。

（6） onUnmounted

卸載組件實(shí)例后調(diào)用，調(diào)用此鉤子時(shí)，組件實(shí)例的所有指令都被解除綁定，所有事件偵聽器都被移除，所有子組件實(shí)例被卸載。

vue2與vue3在生命周期的區(qū)別

vue2	vue3
beforeCreate	setup() 開始創(chuàng)建組件之前，創(chuàng)建的是data和method
created	setup()
beforeMount	onBeforeMount 組件掛載到節(jié)點(diǎn)上之前執(zhí)行的函數(shù)。
mounted	onMounted 組件掛載完成后執(zhí)行的函數(shù)
beforeUpdate	onBeforeUpdate 組件更新之前執(zhí)行的函數(shù)。
updated	onUpdated 組件更新完成之后執(zhí)行的函數(shù)。
beforeDestroy	onBeforeUnmount 組件掛載到節(jié)點(diǎn)上之前執(zhí)行的函數(shù)。
destroyed	onUnmounted 組件卸載之前執(zhí)行的函數(shù)。

到此，關(guān)于“vue3生命周期函數(shù)更改了幾個(gè)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)頁標(biāo)題：vue3生命周期函數(shù)更改了幾個(gè)
網(wǎng)頁URL：http://muchs.cn/article34/gdespe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、做網(wǎng)站、網(wǎng)站內(nèi)鏈、小程序開發(fā)、云服務(wù)器、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容