Vue 中处理 WebGL 上下文丢失需自动感知、暂停、重建和复位，监听 webglcontextlost（须 preventDefault）与 webglcontextrestored 事件，封装为组合式函数管理状态与资源，并保存非 GPU 业务状态实现无感恢复。

在 Vue 应用中处理 WebGL 上下文丢失，核心不是“阻止它发生”，而是让应用具备自动感知、暂停、重建和复位的能力。WebGL 上下文丢失是操作系统或浏览器主动回收 GPU 资源的正常行为，无法完全避免，但可以做到用户无感恢复。

监听上下文事件并阻止默认行为

必须在获取 WebGL 上下文后，立即为 canvas 元素注册两个关键事件：

• 使用 addEventListener（不能用 onwebglcontextlost 这类属性赋值）
• webglcontextlost 回调中务必调用 event.preventDefault()，否则后续不会触发恢复事件
• webglcontextrestored 是唯一可靠的重建入口，所有 WebGL 资源（着色器、缓冲区、纹理等）都需在此重新初始化

封装可复用的上下文管理逻辑

避免在每个组件里重复写事件监听和资源重建代码。推荐封装成组合式函数（Composable）：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 接收 canvas ref 和初始化函数（如 initGLResources()）作为参数
• 内部维护 isContextLost 状态，并在 webglcontextlost 中停止 requestAnimationFrame 循环
• 在 webglcontextrestored 中调用初始化函数，并重启渲染循环
• 配合 onBeforeUnmount 主动释放资源，防止内存泄漏

保存与恢复非 GPU 状态

上下文丢失时，JavaScript 对象（如模型旋转角度、相机位置、动画时间戳）依然有效，这是恢复体验连贯的关键：

立即学习“前端免费学习笔记（深入）”；

• 将业务状态（如视角参数、材质开关、播放进度）抽离到响应式 ref 或 store 中
• 重建 WebGL 资源后，用这些状态重置 uniform、绑定纹理、恢复绘制状态
• 避免在 webglcontextrestored 中只做“从头初始化”，而要实现“从断点续画”

应对 Vue 特有场景：v-show / v-if 与多实例

Vue 的响应式显示控制会引发隐式上下文丢失：

• v-show 切换时若容器设为 display: none，部分浏览器会主动丢弃上下文；建议改用 visibility: hidden 或透明度隐藏
• v-if 销毁组件时，确保手动调用 gl.getExtension('WEBGL_lose_context')?.loseContext() 再卸载，避免残留上下文占用限额
• 多个 WebGL 实例（如多个 PAG 动效）易触发 Too many active WebGL contexts 错误；需限制并发数，或复用 canvas/上下文