vue3改了幾個生命週期函數

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

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

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

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

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

Vue2的生命週期

#（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的生命週期

（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中文網其他相關文章！