vue2与vue3的生命周期钩子函数

Vue2生命周期函数

1 beforeCreate （创建前） ：vue实例初始化之前调用
        

这个阶段属于页面初始化之前（vue实例化之前）
不能拿到数据，方法，Dom元素
不能获取到绑定实例的el

2 created （创建后）：vue实例初始化之后调用

页面初始化之后(Vue实例化之后)
可以获取数据，方法
不能获取到el，Dom元素
虚拟dom并未生成
此阶段并未开始解析模板，页面并不能显示完整信息

3  beforeMount （载入前）：挂载到DOM树之前调用

挂载前
虚拟dom渲染完成， 真实Dom并未生成
所有对Dom节点的操作都无效

4 mounted （载入后）：挂载到DOM树之后调用

挂载后
mounted 阶段 真实dom生成完成 并渲染到页面上
可以 获取dom元素

5 beforeUpdate （更新前）：数据更新之前调用

数据更新之前触发
检测到数据的更新, 但是还未更新Dom

6 updated （更新后）：数据更新之后调用

数据更新完成之后触发
检测到数据的更新并更新Dom

7 beforeDestroy （销毁前）：vue实例销毁之前调用

组件即将销毁时触发

8 destroyed （销毁后）：vue实例销毁之后调用

组件销毁后触发
实例被销毁后vm实例还会存在

Vue3生命周期函数

1 setup 创建实例前 (vue3新增)

        它接受两个参数（props、context(包含attrs、slots、emit)）

        在beforeCreate和Created 两个钩子函数之前的函数

        执行setup时，组件实例尚未被创建，在setup内部this不指向vue实例，是undefined

        和模板一起使用：需要返回一个对象 定义的变量和方法最后都需要return 出去

        使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

        setup函数只能是同步的不能是异步的        

        setup函数只会在初始化的时候执行一次

        注意：setup函数中的props是响应式的，当传入新的prop时，它将被更新但是因为props是响应式的，所以不能使用ES6解构，因为会消除prop的响应式。可以通过setup函数中的toRefs来完成此操作

2 onBeforeMount 挂载DOM前

3 onMounted 挂载DOM后

4 onBeforeUpdate 更新组件前

5 onUpdated 更新组件后

6 onBeforeUnmount 卸载销毁前

7 onUnmounted 卸载销毁后

当组件被keep-alive包裹时，会新增下面两个生命周期函数

8 activated()

缓存路由的生命周期钩子
keep-alive组件激活时使用（在进入缓存路由时调用）
在mounted钩子后执行

9 deactivated()

缓存路由的生命周期钩子
keep-alive组件停用时调用（在离开缓存路由时调用）

终结：在vue3中，setup的执行顺序早于 beforeCreate；
            在vue2中同一个生命周期只能写一个，但是vue3可以写多个。

参考文章：传送门 传送门​​​​​​​