Vue2和Vue3的生命周期

一、Vue2的生命周期

（1）beforeCreate：无法通过vm访问到data中的数据，methods中的方法

（2）created：可以通过vm访问到data中的数据，methods中的方法

（3）beforeMount：页面呈现的是未经Vue编译的DOM结构；所有对DOM的操作，最终都不奏效。

（4）Mounted：页面呈现的是经过Vue编译的DOM；对DOM的操作均有效（尽可能避免）。至此初始化过程结束，在此经常进行一些初始化操作，一般有：开启定时器，发送网络请求、订阅消息、绑定自定义事件等

（5）beforeUpdate：此时，数据是新的，但是页面是旧的，即：页面尚未和数据保持同步。

（6）updated：此时，数据是新的，页面也是新的，即：页面和数据保持同步。

（7）beforeDestroy：此时，vm中所有可用的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作

（8）destroyed：页面销毁

二、Vue3的生命周期

（1）setup：在组件实例初始化之前执行，用来设置初始数据、计算属性、方法等。

（2）beforeCreate：在组件实例初始化之后，数据观测和事件配置之前执行。

（3）created：在组件实例创建完成后执行，此时可以访问到 `data`、`methods` 等属性。

（4）beforeMount：在组件挂载到页面之前执行。

（5）mounted：在组件挂载到页面后执行，此时可以访问到页面中的 DOM 元素。

（6）beforeUpdate：在组件更新之前执行。

（7）updated：在组件更新之后执行。

（8）beforeUnmount：在组件卸载之前执行。

（9）unmounted：在组件卸载之后执行。

三、两者生命周期的区别

（1）Vue3中取消了 `beforeDestroy` 和 `destroyed` 这两个生命周期钩子，取而代之的是 `beforeUnmount` 和 `unmounted`。

（2）Vue3 中新增了 beforeUnmount 生命周期钩子，用来在组件卸载之前执行一些操作。与之对应的是，Vue2 中只有 beforeDestroy 生命周期钩子。

（3）组件的初始化分为创建阶段和设置阶段，beforeCreate 钩子函数在创建阶段被调用，而 created 钩子函数在设置阶段被调用。在Vue3中，这两个钩子函数被合并成了一个 setup 钩子函数，在组件创建阶段执行。

（4）在 Vue3 中，所有的生命周期钩子函数都可以作为组件选项直接被导出，而不需要手动声明。