一文读懂Vue3的生命周期：从入门到精通

Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识，以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。

以下是 Vue.js 3 中的一些重要生命周期钩子函数：

1. beforeCreate

在实例被创建之前调用。此时，数据观测和事件配置还未初始化，所以无法访问 this。

beforeCreate() { }

2. created

在实例创建完成后被立即调用。此时，数据观测和事件配置已经初始化完成，但是 DOM 还没有被挂载到页面上。

created() { }

3. beforeMount

在模板编译成虚拟 DOM 并挂载到页面之前调用。此时，实例已经被创建，数据观测和事件配置也已经初始化完成，但是 DOM 还没有被挂载到页面上。

beforeMount() { }

4. mounted

在模板挂载到页面后调用。此时，实例已经被创建，数据观测和事件配置也已经初始化完成，并且 DOM 已经被成功挂载到页面上。此时可以访问 this。

mounted() { }

5. beforeUpdate

在数据更新之前调用。此时，实例仍然处于同一状态，但是可能已经发生了变化。可以通过对比前后的数据来检测变化。此时可以访问 this。

beforeUpdate() { }

6. updated

在数据更新后调用。此时，实例的状态已经发生了变化，但是尚未重新渲染到页面上。可以通过对比前后的数据来检测变化。此时可以访问 this。

updated() { }

7. beforeUnmount

在实例被卸载之前调用。此时，实例仍然处于同一状态，但是即将从页面中移除。可以通过解除事件绑定等操作来清理资源。此时可以访问 this。

beforeUnmount() { }

8. unmounted