vue3.0生命週期函式
什麼是生命週期：
vue中每個元件都是獨立的，每個元件都有一個屬於它的生命週期，
從一個元件建立、資料初始化、掛載、更新、銷燬，這就是一個元件所謂的生命週期。
在vue2.x中的生命週期為
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed
activated
deactivated
errorCaptured
在vue3中，新增了一個setup生命週期函式，setup執行的時機是在beforeCreate生命函式之前執行，因此在這個函式中是不能通過this來獲取例項的；同時為了命名的統一，將beforeDestroy改名為beforeUnmount，destroyed改名為unmounted，
所以vue3有以下生命週期函式：
beforeCreate（建議使用setup代替）created（建議使用setup代替）
setup
beforeMount mounted
beforeUpdate updated
beforeUnmount unmounted
同時，vue3新增了生命週期鉤子，我們可以通過在生命週期函式前加on來訪問元件的生命週期，我們可以使用以下生命週期鉤子：
Composition API 形式的生命週期鉤子
onBeforeMount onMounted
onBeforeUpdate onUpdated
onBeforeUnmount onUnmounted
onErrorCaptured
onRenderTracked
onRenderTriggered
當執行到對應的生命週期時，就呼叫對應的鉤子函式：
<script>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
ref
} from 'vue'
export default {
setup () {
// 其他的生命週期
onBeforeMount (() => {
console.log("App ===> 相當於 vue2.x 中 beforeMount")
})
onMounted (() => {
console.log("App ===> 相當於 vue2.x 中 mounted")
})
// 注意，onBeforeUpdate 和 onUpdated 裡面不要修改值
onBeforeUpdate (() => {
console.log("App ===> 相當於 vue2.x 中 beforeUpdate")
})
onUpdated (() => {
console.log("App ===> 相當於 vue2.x 中 updated")
})
onBeforeUnmount (() => {
console.log("App ===> 相當於 vue2.x 中 beforeDestroy")
})
onUnmounted (() => {
console.log("App ===> 相當於 vue2.x 中 destroyed")
})
return {
}
}
}
</script>