路由切换后onerror事件处理器不会自动清除，因其为内联属性，框架不接管清理；需在组件卸载或路由离开前主动执行img.onerror=null并重置src。
路由切换后 onerror 事件处理器不会自动清除，它会随 DOM 节点残留，尤其在 Vue/React 等框架中频繁复用或重渲染 <img> 标签时，容易导致多次绑定、重复触发甚至内存泄漏。
为什么路由切换后 onerror 还在执行
根本原因是 onerror 是内联事件处理器（如 <img src="x" onerror="handleError()">），它被解析为元素的属性，不会因组件卸载或路由跳转而自动解绑。框架若未显式销毁该节点（比如用了 v-show 或缓存了 DOM），onerror 就一直挂着。
- Vue 中使用
v-if切换时 DOM 被移除，onerror随之消失；但v-show只切 display，onerror仍驻留 - React 中若用
dangerouslySetInnerHTML注入带onerror的 HTML，React 不接管这些内联事件，完全不清理 - 手动
innerHTML = ''或replaceWith()也不保证清掉已绑定的内联处理器——浏览器行为不一致，部分版本会保留
如何安全移除残留的 onerror 绑定
不能依赖“删 DOM”就万事大吉，得主动干预。最可靠的方式是：在路由离开前或组件卸载前，遍历所有可能含 onerror 的资源标签，显式清空其 onerror 属性并重置 src。
- 对每个
<img>元素，执行img.onerror = null，再设img.src = ''（清空 src 是防止后续加载失败再次触发） - 避免只删
src属性却不碰onerror——断点调试可见：删src后，onerror属性仍在 DOM 中，且下一次赋值src时仍会触发 - 若用 querySelectorAll 批量操作，注意避开已销毁的节点，加
if (img.isConnected)判断 - 不要用
removeAttribute('onerror')，它只删属性字符串，不解除 JS 绑定；onerror = null才真正切断引用
Vue Router / React Router 场景下的实操建议
在路由守卫或组件生命周期中插入清理逻辑，比等用户点击更可控。
- Vue Router 4：
beforeRouteLeave守卫里调用清理函数，或在onBeforeUnmount中执行document.querySelectorAll('img').forEach(img => { img.onerror = null; img.src = ''; }) - React Router v6：在组件内用
useEffect(() => { return () => { /* 清理逻辑 */ } }, [])，确保卸载时执行 - 如果页面有大量动态图片（如列表项），建议改用事件委托 + 自定义属性方案，例如监听 document 上的
error事件，通过event.target.matches('img[data-retry]')判断，避免每个 img 都挂onerror - 服务端渲染（SSR）场景下，首屏 HTML 带内联
onerror，hydrate 后必须立刻执行一次清理，否则 hydration 后事件会双倍绑定
真正麻烦的不是怎么删，而是删不干净——onerror 是唯一能在标签级捕获加载失败的原生钩子，但它也是唯一不会随框架生命周期自动管理的事件。一旦混用内联写法和动态渲染，就很容易在路由切换后留下“幽灵 handler”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
