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

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

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

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

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

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

Vue2的生命周期

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

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

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

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

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

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

（3） beforeMount（掛載前）

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

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

（4）mounted（掛載后）

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

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

（5）beforeUpdate（更新前）

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

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

（6）updated（更新后）

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

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

（7）beforeDestroy（銷毀前）

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

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

（8）destroyed（銷毀后）

實例銷毀后調(diào)用，調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務(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>
		<!-- 準備好一個容器-->
		<div id="root" :x="n">
			<h3 v-text="n"></h3>
			<h3>當(dāng)前的n值是：{{n}}</h3>
			<button @click="add">點我n+1</button>
			<button @click="bye">點我銷毀vm</button>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			// template:`
			// 	<div>
			// 		<h3>當(dāng)前的n值是：{{n}}</h3>
			// 		<button @click="add">點我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請求、啟動定時器、綁定自定義事件、訂閱消息等【初始化操作】。
2.beforeDestroy: 清除定時器、解綁自定義事件、取消訂閱消息等【收尾工作】
關(guān)于銷毀Vue實例:
(1)銷毀后借助Vue開發(fā)者工具看不到任何信息。
(2)銷毀后自定義事件會失效，但原生DOM事件依然有效。
(3)一般不會在beforeDestroy操作數(shù)據(jù)，因為即便操作數(shù)據(jù)，也不會再觸發(fā)更新流程了。

Vue3的生命周期

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

（1） onBeforeMount

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

（2） onMounted

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

（3） onBeforeUpdate

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

（4） onUpdated

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

（5） onBeforeUnmount

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

（6） onUnmounted

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

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

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

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

網(wǎng)頁標題：vue3生命周期函數(shù)更改了幾個
網(wǎng)頁URL：http://aaarwkj.com/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)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

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

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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