Vue2和Vue3生命周期的对比

一、Vue生命周期

vue实例从创建到销毁的过程，具体来说就是vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染数据、更新数据、最后销毁这样的一个过程。

二、生命周期对比

Vue2生命周期	Vue3生命周期
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

以及特殊钩子

Vue2	Vue 3
activated	deactivated
onActivated	onDeactivated
errorCaptured	onErrorCaptured

三、生命周期钩子函数详解

1.beforeCreate

创建vue实例之前，此时vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

2.created

创建实例成功，vue实例的数据对象data有了，挂载元素$el还没有。

3.beforeMount

渲染DOM之前，vue实例的挂载元素$el和data都初始化了，但还是虚拟的dom节点。

4.mounted

渲染DOM完成，vue实例挂载完成。

5.beforeUpdate

data更新时触发，重新渲染之前。

6.Update

data更新时触发，重新渲染完成。

7.beforeDestroy

组件销毁之前，在这一步，vue实例仍然完全可用。

8.destroyed

组件销毁完成，vue实例解除了事件监听以及和dom的绑定。

四、setup函数

setup 函数是在beforeCreate生命周期函数之前运行的

setup函数接收两个参数，props和context

注意：

• 因为setup()是在beforeCreated之前，data、methods还未初始化，所以在setup中无法使用
• setup函数只能是同步的

五、生命周期调用

1.Vue2

<script>
export default {
    name: 'App',
    beforeCreate() {
        console.log('beforeCreate')
    },
    created() {
        console.log('created')
    },
    beforeMount() {
        console.log('beforeMount')
    },
    mounted() {
        console.log('mounted')
    },
    beforeUpdate() {
        console.log('beforeUpdate')
    },
    updated() {
        console.log('updated')
    },
    beforeDestory() {
        console.log('beforeDestory')
    },
    destoryed() {
        console.log('destoryed')
    },
}
</script>

2.Vue3

<script>
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

export default {
    name: 'App',
    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')
        })

        return {}
  }
}
</script>