1.添加我們的生命周期鉤子
Vue3 中，要在 setup() 函數(shù)中使用生命周期來完成需求
導入：
import { onMounted, onUpdated, onUnmounted } from 'vue'
除去beforeCreate 和 created 之外碾褂，在我們的 setup 方法中泣港，有9個舊的生命周期鉤子暂殖，我們可以在setup 方法中訪問
beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
export default {
setup() {
onBeforeMount(() => {
// ...
})
onMounted(() => {
// ...
})
onBeforeUpdate(() => {
// ...
})
onUpdated(() => {
// ...
})
onBeforeUnmount(() => {
// ...
})
onUnmounted(() => {
// ...
})
onActivated(() => {
// ...
})
onDeactivated(() => {
// ...
})
onErrorCaptured(() => {
// ...
})
}
}
生命周期
這些生命周期鉤子只能在 setup() 內部同步使用，因為他們依賴正在調用 setup() 的組件實例当纱。
因為 setup 是圍繞 beforeCreate 和 created 生命周期鉤子運行的呛每，所以不需要顯式地定義它們。換句話說坡氯，在這些鉤子中編寫的任何代碼都應該直接在 setup 函數(shù)中編寫晨横。
2.新增的鉤子函數(shù)
onRenderTracked
onRenderTriggered
兩個鉤子函數(shù)都接收一個 DebuggerEvent:
export default {
onRenderTriggered(e) {
debugger
// 檢查哪個依賴性導致組件重新渲染
},
}
