深入瞭解vue2與vue3的生命周期對比

周期對比

vue2 vue3
beforeCreate setup
created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
activeted onActiveted
deactiveted onDeactiveted
beforeDestory onBeforeUnmount
destoryed onUnmounted

用法

vue2 中的生命周期與 data / methods 同級別以函數方式使用,比如 created() {}

data() {
    return {}
},
created() {
    ...
}

vue3 中的生命周期 setup 在最外層,不需要按需加載,其他的生命周期得按需加載才能使用

import { omMounted } from 'vue'
setup() {
    onMounted(() => { ... })
}

總結

本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀: