首頁  >  文章  >  web前端  >  vue3改了幾個生命週期函數

vue3改了幾個生命週期函數

青灯夜游
青灯夜游原創
2023-01-13 17:57:432568瀏覽

vue3改了4個生命週期函數。 Vue3組合式api取消了beforeCreated和created鉤子函數,採用steup鉤子代替,且裡面不能使用this。 Vue3裡面的組件銷毀的鉤子函數由destroyed和beforeDestroy換成了beforeUnmount和unmounted。

vue3改了幾個生命週期函數

本教學操作環境:windows7系統、vue3版,DELL G3電腦。

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

vue應用程式中有4個主要事件(8個鉤子):

#建立---- 在組成建立時執行
掛載---- DOM被掛載時執行
更新---- 當回應資料被修改時執行
銷毀----在元素被銷毀之前立即執行

Vue2的生命週期

vue3改了幾個生命週期函數

#(1) beforeCreate(建立前)

資料監控(getter和setter)和初始化事件還沒開始,此時data 的回應式追蹤、
event/watcher 都還沒被設定

不能存取data、computed、watch、methods上的方法和資料。

(2)created(建立後)

建立完成後會自動執行函數

(3) beforeMount(掛載前)

在掛載開始之前被呼叫,相關的render函數首次被呼叫。

這次Vue開始解析模板,產生虛擬DOM存在記憶體中,還沒有把虛擬DOM轉換成真實DOM,插入頁面中

# #(4)mounted(掛載後)

在el被新創建的vm.$el(就是真實DOM的拷貝)替換,並掛載到實例上去之後調用(將內存中的虛擬DOM轉為真實DOM,真實DOM插入頁面)。

一般在這個階段進行:開啟計時器,發送網路請求,訂閱訊息,綁定自訂事件等等

#(5)beforeUpdate(更新前)

响应式数据更新时调用,此时虽然响应式数据更新,但是对应的真实 DOM 

还没有被渲染(数据是新的,但页面是旧的,页面和数据没保持同步呢)。

(6)updated(更新後)

由於資料變更導致的虛擬DOM重新渲染和打補丁之後調用。

呼叫時,元件 DOM已經更新,所以可以執行依賴DOM的操作。然而在大多數情況下,應避免在此期間更改狀態,因為這可能會導致更新無限循環

#(7)beforeDestroy(銷毀前)

實例銷毀之前呼叫

在這個階段一般進行關閉計時器,取消訂閱訊息,解綁自訂事件。

(8)destroyed(銷毀後)

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

nbsp;html>
	
		<meta>
		<title>分析生命周期</title>
		<!-- 引入Vue -->
		<script></script>
	
	
		<!-- 准备好一个容器-->
		<div>
			<h2></h2>
			<h2>当前的n值是:{{n}}</h2>
			<button>点我n+1</button>
			<button>点我销毁vm</button>
		</div>
	

	<script>
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:&#39;#root&#39;,
			// template:`
			// 	<div>
			// 		<h2>当前的n值是:{{n}}
			// 		<button @click="add">点我n+1
			// 	
			// `,
			data:{n:1},
			methods: {
				add(){
					console.log(&#39;add&#39;)
					this.n++
				},
				bye(){
					console.log(&#39;bye&#39;)
					this.$destroy()
				}
			},
			watch:{
				n(){
					console.log(&#39;n变了&#39;)
				}
			},
			beforeCreate() {
				console.log(&#39;beforeCreate&#39;)
			},
			created() {
				console.log(&#39;created&#39;)
			},
			beforeMount() {
				console.log(&#39;beforeMount&#39;)
			},
			mounted() {
				console.log(&#39;mounted&#39;)
			},
			beforeUpdate() {
				console.log(&#39;beforeUpdate&#39;)
			},
			updated() {
				console.log(&#39;updated&#39;)
			},
			beforeDestroy() {
				console.log(&#39;beforeDestroy&#39;)
			},
			destroyed() {
				console.log(&#39;destroyed&#39;)
			},
		})
	</script>
常用的生命週期鉤子:

1.mounted: 發送ajax請求、啟動計時器、綁定自訂事件、訂閱訊息等【初始化操作】。
2.beforeDestroy: 清除定時器、解綁定自訂事件、取消訂閱訊息等【收尾工作】
關於銷毀Vue實例:
(1)銷毀後借助Vue開發者工具看不到任何資訊.
(2)銷毀後自訂事件會失效,但原生DOM事件依然有效。
(3)一般不會在beforeDestroy操作數據,因為即便操作數據,也不會再觸發更新流程了。

Vue3的生命週期

vue3改了幾個生命週期函數

(1) onBeforeMount

在掛載之前被調用,渲染函數render首次被調用

(2) onMounted

元件掛載時呼叫

(3)onBeforeUpdate

##資料更新時調用,發生在虛擬DOM打補丁之前。

(4) onUpdated

##########因為資料變更導致的虛擬DOM重新渲染和打補丁時呼叫## ################(5) onBeforeUnmount#######

在卸載元件實例之前調用,此階段的實例依舊是正常的。

(6) onUnmounted

#卸載元件實例後調用,呼叫此鉤子時,元件實例的所有指令都被解除綁定,所有事件偵聽器都被移除,所有子元件實例被卸載。


vue2與vue3在生命週期的差異

##vue2vue3#beforeCreatesetup() 開始建立元件之前,建立的是data和method createdsetup()#beforeMountonBeforeMount 元件掛載到節點上之前執行的函數。 mountedonMounted 元件掛載完成後執行的函數beforeUpdateonBeforeUpdate 元件更新之前執行的函數。 updatedonUpdated 元件更新完成之後執行的函數。 beforeDestroyonBeforeUnmount 元件掛載到節點上先前執行的函數。 destroyedonUnmounted 元件卸載先前執行的函數。

總結: 

#1、Vue3 組合式api取消了beforeCreated 和created 鉤子函數, 採用steup鉤子代替且裡面不能使用this 

2、Vue3裡面的元件銷毀的鉤子函數換成了beforeUnmount 和unmounted 之前是destroyed和beforeDestroy 但是要注意如果Vue3 使用Vue2 的選擇式寫法之前的鉤子函數還是可以使用

3、Vue3的組合式api生命週期函數要比Vue2 選擇式api 的生命週期多個前綴on ,而且要import 單獨引入

相關推薦:

vue.js影片教學

以上是vue3改了幾個生命週期函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn