白屏主因是组件卸载导致状态丢失，而非diff算法问题；应优先用缓存实例，配合activated钩子更新、兜底异步加载，并确保有唯一根元素。
白屏瞬间不是 Diff 算法“算错了”，而是它根本没机会算——组件被卸载、DOM 被销毁、状态全丢，再回来就得从头挂载、请求、渲染。真正要调优的，是“不让它卸载”，而不是“让它算得更快”。
用 keep-alive 缓存真实组件实例
Vue 的 <keep-alive></keep-alive> 是解决白屏最直接有效的手段。它让组件在切换时不销毁，仅停用（deactivated），返回时直接激活（activated），保留 DOM、数据、滚动位置和内部状态。
- 确保组件有明确的
name（不是路由 name），且与include中的值完全一致；生产环境异步组件下，include若误写为路由 name 会直接白屏 - 避免在
<keep-alive></keep-alive>外层套v-if，否则条件为 false 时缓存会被清空；改用v-show控制显隐更安全 - 对需要局部刷新的场景（如列表页进详情页后，列表需拉新数据），可在
activated钩子中触发更新，而非依赖 mounted
控制组件切换的渲染层级
白屏常源于“兄弟组件互斥”：A 和 B 是 router-view 下的两个页面，路由切换时 A 被 unmount，B mount —— 这个间隙就是白屏窗口。
- 把关键页面（如列表页）抽离为独立缓存容器，不走常规路由切换，而是用动态组件 +
<keep-alive></keep-alive>手动管理生命周期 - 在路由配置中为高频返回页面（如 /list → /detail → /list）设置
meta: { keepAlive: true }，配合router-view的include动态过滤 - 慎用
destroy-on-close类似逻辑：任何主动销毁 DOM 后又试图复用的操作（如 el-dialog、el-table-column 渲染异常），都可能因节点缺失导致白屏或报错
规避根节点缺失引发的 Transition 失效
<transition></transition> 无法动画化文本、注释或多个并列根元素。若组件模板无唯一包裹元素，Vue3 虽允许多根，但动画会静默失败，表现为“闪退式白屏”。
- 检查所有被
<transition></transition>包裹的组件，确保其<template></template>内部有且仅有一个可动画化的根元素（如<div>、<code><section></section>） - 避免使用纯文本、插槽透传或条件渲染（
v-if）直接产出多个顶层节点；可用<template v-if></template>包一层再分发 - 开发时留意控制台警告：
Component inside <transition> renders non-element root node that cannot be animated</transition>，这是白屏前兆 - 将异步组件包裹在
<suspense></suspense>中，并提供#fallback插槽（如骨架屏、轻量 loading） - 搭配
defineAsyncComponent使用，支持加载超时、错误重试等策略，比裸写 Promise 更健壮 - 注意：Suspense 不替代 keep-alive，二者可共存——前者管“首次加载”，后者管“反复切换”
结合 Suspense 实现优雅加载兜底
当组件确实需要异步加载（如动态 import、远程微前端模块），<suspense></suspense> 可接管整个挂载过程，避免空白等待。
