Vue3生命周期
2026-10-23 22:26:13
Vue3 生命周期
Vue3 引入了 Composition API，为组件的生命周期管理提供了新的方式。以下是 Vue3 生命周期的详细解析：
一、组件加载
setup
触发时机：组件创建前触发，等同于 Vue2 中的 beforeCreate 和 created 生命周期钩子。
特点：在 setup 函数中，没有 this 上下文，因为此时组件实例尚未创建。setup 函数是 Composition API 的入口，用于定义组件的响应式状态、计算属性、方法等。
onBeforeMount
触发时机：组件挂载前触发，等同于 Vue2 中的 beforeMount 生命周期钩子。
用途：在这个阶段，模板和渲染函数已经编译完成，但尚未挂载到 DOM 上。可以在此阶段进行最后的渲染前准备工作。
onMounted
触发时机：组件挂载后触发，等同于 Vue2 中的 mounted 生命周期钩子。此时 DOM 已经加载完毕。
用途：适合执行需要访问 DOM 元素的初始化操作，如获取元素的尺寸、设置监听器等。
二、组件更新
onBeforeUpdate
触发时机：组件更新前调用，等同于 Vue2 中的 beforeUpdate 生命周期钩子。
用途：在这个阶段，组件的响应式状态已经更新，但尚未重新渲染。可以在此阶段进行更新前的准备工作，如取消之前的监听器、清理资源等。
onUpdated
触发时机：组件更新后调用，等同于 Vue2 中的 updated 生命周期钩子。此时组件已经重新渲染完成。
用途：适合执行需要访问更新后 DOM 元素的操作，如重新计算元素的尺寸、更新监听器等。
三、组件卸载
onBeforeUnmount
触发时机：组件卸载前调用，等同于 Vue2 中的 beforeDestroy 生命周期钩子。
用途：在这个阶段，组件即将被销毁，但尚未执行销毁操作。可以在此阶段进行清理工作，如取消定时器、移除事件监听器等。
onUnmounted
触发时机：组件卸载后调用，等同于 Vue2 中的 destroyed 生命周期钩子。此时组件已经完全销毁。
用途：适合执行一些需要在组件销毁后进行的操作，如清理全局资源、释放内存等。
四、Keep-alive 相关
onActivated
触发时机：使用 keep-alive 组件缓存时，进入页面时调用，等同于 Vue2 中的 activated 生命周期钩子。
用途：适合在组件被激活时执行一些操作，如重新获取数据、更新视图等。
onDeactivated
触发时机：使用 keep-alive 组件缓存时，离开页面时调用，等同于 Vue2 中的 deactivated 生命周期钩子。
用途：适合在组件被停用时执行一些操作，如暂停定时器、移除不必要的监听器等。
五、捕获子组件错误
- onErrorCaptured
用途：onErrorCaptured 生命周期是用来捕获子组件中的错误，而不是当前组件中的错误。如果不使用这个生命周期钩子，子组件报错时浏览器会直接报错。使用这个生命周期钩子可以捕获到错误，并在其中进行处理，避免浏览器报错。
六、组件调试
onRenderTracked
触发时机：当有数据在组件模板中使用时触发。
用途：适合用于调试和追踪组件中响应式数据的使用情况。
onRenderTriggered
触发时机：当有数据在组件模板中被修改时触发。
用途：同样适合用于调试和追踪组件中响应式数据的修改情况。
综上所述，Vue3 的生命周期提供了丰富的钩子函数，允许开发者在组件的不同阶段执行相应的操作。通过合理使用这些生命周期钩子，可以更好地管理组件的状态和行为，提高应用的性能和稳定性。
热门标签
