突发断电关机时Vue等JS框架的生命周期钩子是否执行？

核心结论 #

突发断电、电池耗尽、强制关机或直接杀死浏览器进程这类异常终止场景中，Vue3的unmounted钩子、Vue2的destroyed钩子都不会被执行。

原因说明 #

这类异常情况属于进程被强制终止，系统会直接回收资源，不会触发浏览器正常的页面卸载流程。Vue的生命周期钩子依赖浏览器的事件循环和正常的页面卸载事件（如unload），异常终止时这些流程被直接打断，框架根本没有机会执行钩子内的代码。

仅靠销毁钩子保存数据的可行性 #

完全不可行。因为异常场景下钩子不会触发，会导致未保存的数据直接丢失，无法覆盖所有风险场景。

可靠的数据保存方案 #

• 监听页面卸载事件：通过window.addEventListener('beforeunload', handler)或window.addEventListener('unload', handler)处理正常关闭页面的场景，但注意unload事件中异步操作可能无法完成，尽量用同步逻辑保存数据；不过这类事件同样无法覆盖突发断电等极端情况。
• 定时自动保存：设置固定时间间隔（如1分钟），自动将数据同步到localStorage、IndexedDB或后端服务器，这是覆盖异常场景最可靠的方式。
• 监听页面可见性：当用户切换标签页时触发保存，减少后台操作时的数据丢失风险。

其他框架的情况 #

Angular等前端框架的组件销毁钩子（如Angular的ngOnDestroy）逻辑与Vue一致，异常终止场景下同样不会执行，数据保存方案也可参考上述内容。

内容的提问来源于stack exchange，提问作者CBD