当一个 Vue 组件被实例化时，会触发以下生命周期事件：

1. beforeCreate: 在组件实例被创建之前调用。这个阶段是在组件实例化之前，所以在这个阶段无法访问到组件实例的属性和方法。
2. created: 在组件实例创建完成后调用。在这个阶段，组件实例已经创建完成，但尚未挂载到 DOM 中，因此你可以在这个阶段进行数据的初始化、异步请求等操作。
3. beforeMount: 在组件被挂载到 DOM 之前调用。此时，组件的模板已经编译完成，但尚未渲染到页面上。
4. mounted: 在组件被挂载到 DOM 后调用。在这个阶段，组件已经被插入到页面中，可以访问到组件的 DOM 元素，并且可以操作 DOM、绑定事件等。
5. beforeUpdate: 在组件更新之前调用。当组件的响应式数据发生变化时，会触发该钩子函数。在这个阶段，组件尚未重新渲染，但数据已经更新。
6. updated: 在组件更新完成后调用。在这个阶段，组件已经重新渲染，并且更新了 DOM。你可以在这个阶段执行一些需要基于更新后的 DOM 进行的操作。
7. beforeUnmount: 在组件销毁之前调用。在这个阶段，组件尚未从 DOM 中移除。
8. unmounted: 在组件销毁完成后调用。在这个阶段，组件已经从 DOM 中移除，所有的事件监听器和定时器都会被移除，组件实例也会被销毁。这个阶段是进行销毁相关的清理工作的最佳时机。

当同一个组件被复用时，上述生命周期事件会在每次复用时按照顺序依次触发。需要注意的是，在组件复用的情况下，beforeCreate 和 created 钩子函数只在组件第一次创建时调用，后续复用时不会再次调用。

在组件复用的过程中，可以利用这些生命周期事件来进行适当的数据更新、状态重置和资源释放，以确保组件在复用时能够正确地展现预期的行为和效果。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24