💗💗💗歡迎來到我的博客，你將找到有關如何使用技術解決問題的文章，也會找到某個技術的學習路線。無論你是何種職業，我都希望我的博客對你有所幫助。最后不要忘記訂閱我的博客以獲取最新文章，也歡迎在文章下方留下你的評論和反饋。我期待著與你分享知識、互相學習和建立一個積極的社區。謝謝你的光臨，讓我們一起踏上這個知識之旅！
文章目錄
- 🍀什么是生命周期？
- 🍀Vue2的生命周期
- 🍀Vue3的生命周期
- 🍀 Vue 2 與 Vue 3 生命周期的變化
- 🍀 結論
🍀什么是生命周期？
生命周期指的是事物從誕生到消亡所經歷的各個階段或過程。在軟件開發中，特別是在前端開發中，生命周期通常指的是一個軟件組件（比如網頁、應用程序）從創建到銷毀的整個過程。在這個過程中，組件會經歷不同的階段，每個階段都有自己的特點和功能
如果問它有啥用的話，那么就是它可以幫助開發者更好地理解和控制軟件的行為，例如在特定階段執行特定的操作，或者釋放資源以防止內存泄漏，本節我們將簡單介紹一下Vue2,3當中的生命周期，以及它們的相同不同之處
🍀Vue2的生命周期
前幾節我們都是使用Vue3進行實操，但是我們還沒有創建過Vue2的項目，這里我們創建一個Vue2的項目
我們再來回顧一下
vue create vue2_test
接下來我們選擇vue2
接下來我們就暫且等待創建成功吧
創建完成后，我們將根組件也就是App.vue中的內容進行清理一下，同時創建一個Person.vue作為子組件，同時在子組件里面寫上我們的初識代碼
<template></template><script>export default {name: 'Person',
}
</script>
相比于Vue3，Vue2的運行命令如下
npm run serve
別忘了根組件的書寫
<template><Person/>
</template><script>
import Person from './components/Person.vue'
export default {name: 'App',components:{Person}
}
</script>接下來我們上正題
在 Vue 2 中，組件的生命周期包括了創建、掛載、更新和銷毀四個階段。下面是 Vue 2 的生命周期鉤子函數列表：
- beforeCreate: 在實例初始化之后，數據觀測 (data observer) 和事件配置 (event watchers) 之前被調用。
- created: 實例已經創建完成后被調用，此時組件的數據綁定、計算屬性、方法、事件等都已初始化。
beforeCreate(){console.log('創建前')
},
created(){console.log('創建完畢')
}
- beforeMount: 在掛載開始之前被調用，相關的渲染函數首次被調用。
- mounted: 實例掛載完成后被調用，此時 DOM 元素已經插入文檔中。
beforeMount(){console.log('掛載前')
},
mounted(){console.log('掛載完畢')
}
- beforeUpdate: 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。
- updated: 組件更新完成后被調用，此時 DOM 已經更新。
beforeUpdate(){console.log('更新前')
},
updated(){console.log('更新完畢')
}
- beforeDestroy: 實例銷毀之前調用。在這一步，實例仍然完全可用。
- destroyed: 實例銷毀后調用，此時 Vue 實例的所有指令、事件監聽器被移除，所有子實例也被銷毀。
beforeDestroy(){console.log('銷毀前')
},
destroyed(){console.log('銷毀完畢')
}
🍀Vue3的生命周期
在 Vue 3 中，與 Vue 2 類似，依然保留了創建、掛載、更新和銷毀四個階段，但在細節上有所調整和優化。Vue 3 為了提高性能，對一些生命周期鉤子進行了拆分和合并。
下面是 Vue 3 的生命周期鉤子函數列表：
- setup：創建
- onBeforeMount: 在掛載開始之前被調用，相關的渲染函數首次被調用。
- onMounted: 實例掛載完成后被調用，此時 DOM 元素已經插入文檔中。
- onBeforeUpdate: 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。
- onUpdated: 組件更新完成后被調用，此時 DOM 已經更新。
- onBeforeUnmount: 在卸載組件之前調用。
- onUnmounted: 組件卸載后調用。
// 創建console.log('創建')// 掛載前onBeforeMount(()=>{// console.log('掛載前')})// 掛載完畢onMounted(()=>{//console.log('掛載完畢')})// 更新前onBeforeUpdate(()=>{// console.log('更新前')})// 更新完畢onUpdated(()=>{// console.log('更新完畢')})// 卸載前onBeforeUnmount(()=>{// console.log('卸載前')})// 卸載完畢onUnmounted(()=>{// console.log('卸載完畢')})
注意：父組件的最后掛載的
🍀 Vue 2 與 Vue 3 生命周期的變化
在 Vue 3 中，生命周期鉤子函數的名稱發生了變化，從 before 和 mounted 變為 onBefore 和 onMounted。這樣的調整使得生命周期鉤子的命名更加一致和清晰。此外，Vue 3 還將銷毀階段的鉤子函數從 beforeDestroy 和 destroyed 合并為 onBeforeUnmount 和 onUnmounted，簡化了生命周期的管理和理解。
另外，Vue 3 通過引入 Composition API，進一步提升了組件的靈活性和復用性。通過 Composition API，開發者可以更加自由地組織組件邏輯，不再受限于固定的生命周期鉤子函數，這對于復雜組件的開發尤為重要。
🍀 結論
本文對 Vue 2 和 Vue 3 的生命周期進行了對比與分析，介紹了兩者的異同點。Vue 3 在保留 Vue 2 生命周期特性的基礎上，做出了一些調整和優化，以提升開發體驗和性能。了解和熟悉 Vue 的生命周期對于正確使用和優化 Vue 應用程序至關重要，希望本文能夠幫助讀者更好地理解和應用 Vue.js。
挑戰與創造都是很痛苦的，但是很充實。
