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

Posted on by

周期對比

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的更多內容!

推薦閱讀：