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(() => { ... })
}