盘点 Vue 的生命周期每个阶段都做了哪些事儿

在开发 Vue 应用时，理解组件的生命周期是至关重要的。

生命周期钩子让开发者能够在组件的不同阶段执行代码。

本文将逐步讲解 Vue 的生命周期钩子每一步的作用。

Vue2

beforeCreate： 这个阶段还不能访问 data 中的属性以及 method 中的方法，因为 Vue 实例还没有初始化成功。

created： 此时 Vue 的实例已经挂载完毕，可以访问 data 和 method 了，一般在这里发起 axios 网络请求并赋值给 data 中的数据。但是还不能获取或修改 dom 元素，因为 dom 还没有挂载成功。如果情况特殊，可以使用 nextTick 来操作 dom

beforeMount： 此时还是无法获取 dom，因为 dom 还没有挂载到页面上。

mounted： 到这一步 dom 就挂载成功了，可以进行操作了。

beforeUpdate： 此时 Vue 中数据虽然发生了变化，但页面还没开始重新渲染

Updated： 这时候页面重新渲染完成，数据是最新的

beforeDestroy： 此时 Vue 实例仍然可用，可以访问 data、method 等，一般在这里进行一些清理工作或者在销毁之前做一些操作

destroyed： 此时 Vue 的实例已经被销毁了，不能再访问 data、method 等

Vue3

V3 与 V2 的生命周期大同小异，只是语法略有改变

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured