| Vue2 生命周期 |
DOM |
DATA |
生命周期作用 |
| beforeCreate |
否 |
否 |
在实例初始化之后，数据观测 (data observer) 和事件配置 (event watcher) 之前被调用。 |
| created |
否 |
是 |
完成了数据观测和事件配置，未挂载到 DOM 上。可以访问 data 中的数据，进行一些初始话操作。 |
| beforeMount |
否 |
是 |
在挂载开始之前被调用：相关的 render 函数首次被调用。 |
| mounted |
是 |
是 |
实例已经挂载到 DOM 上，可以访问页面中的元素，进行 DOM 操作等。 |
| beforeUpdate |
否 |
否 |
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 |
| updated |
否 |
否 |
由于数据更改导致的虚拟 DOM 重新渲染和打补丁后被调用。 |
| beforeUnmount |
否 |
否 |
实例从页面中销毁之前调用，可以在这个钩子中进行一些清理工作。 |
| unmounted |
否 |
否 |
实例从页面中销毁后调用。 |
| Vue 3 |
DOM |
DATA |
生命周期作用 |
| onBeforeMount |
是 |
是 |
在挂载开始之前被调用：相关的 render 函数首次被调用。 |
| onMounted |
是 |
是 |
实例已经挂载到 DOM 上，可以访问页面中的元素，进行 DOM 操作等。 |
| onBeforeUpdate |
否 |
否 |
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 |
| onUpdated |
否 |
否 |
由于数据更改导致的虚拟 DOM 重新渲染和打补丁后被调用。 |
| onBeforeUnmount |
否 |
否 |
实例从页面中销毁之前调用，可以在这个钩子中进行一些清理工作。 |
| onUnmounted |
否 |
否 |
实例从页面中销毁后调用。 |
在 Vue 3 中，生命周期钩子名称前都带有”on”前缀，并且包括了onBeforeMount和onMounted钩子。另外还引入了onBeforeUnmount和onUnmounted钩子，以替代beforeDestroy和destroyed钩子，从而更准确地描述组件销毁过程。Options API 和 Composition API 带来了一些不同之处，特别是在数据管理和组件逻辑方面。因此，在使用不同 API 时，可能会对应不同的生命周期处理方式。