Vue2和Vue3生命周期的对比

一、Vue生命周期

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

二、生命周期对比

以及特殊钩子

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

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>