Vue3 和 Vue2 的生命周期有什么区别

Options API 生命周期

• beforeDestroy 改为 beforeUnmount
• destroyed 改为 unmouted
• 其他沿用 Vue2 的生命周期

例如：

beforeCreate() {
     console.log('beforeCreate')
 },
 created() {
     console.log('created')
 },
 beforeMount() {
     console.log('beforeMount')
 },
 mounted() {
     console.log('mounted')
 },
 beforeUpdate() {
     console.log('beforeUpdate')
 },
 updated() {
     console.log('updated')
 },
 // beforeDestroy 改名
 beforeUnmount() {
     console.log('beforeUnmount')
 },
 // destroyed 改名
 unmounted() {
     console.log('unmounted')
 }

打印结果：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

Composition API 生命周期

比如

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
    // 等于 beforeCreate 和 created
    setup() {
        console.log('setup')

        onBeforeMount(() => {
            console.log('onBeforeMount')
        })
        onMounted(() => {
            console.log('onMounted')
        })
        onBeforeUpdate(() => {
            console.log('onBeforeUpdate')
        })
        onUpdated(() => {
            console.log('onUpdated')
        })
        onBeforeUnmount(() => {
            console.log('onBeforeUnmount')
        })
        onUnmounted(() => {
            console.log('onUnmounted')
        })

    },
}

打印结果：

setup
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted