autofocus在路由懒加载组件中必然失效，因其仅在HTML初始解析阶段生效，而懒加载组件DOM异步插入时页面已就绪；必须用useEffect/onMounted配合ref.focus()并做存在性检查、时机控制和SSR兼容处理。
autofocus 在路由懒加载组件里根本不会触发——它只认 HTML 初始解析阶段的 DOM，而懒加载组件的 <input autofocus> 是异步插入的，浏览器压根不扫描第二次。
为什么懒加载组件里的 autofocus 一定失效
路由懒加载（比如 React 的 React.lazy、Vue 的 defineAsyncComponent）本质是动态 import + 动态挂载，组件 DOM 在用户导航后才创建。此时页面早已完成初始解析，autofocus 属性即使写对了，也像往空盒子里扔钥匙——盒子还没造好，钥匙没地方插。
-
autofocus是浏览器在 HTML parser 阶段执行的一次性动作，不是运行时监听器 - 懒加载组件的
<input autofocus>被插入时，DOM 已处于“已就绪”状态，该属性被静默忽略 - SSR 场景下更危险：服务端渲染不执行 JS，客户端 hydration 后再挂载，
autofocus两次都错过
React 中用 useEffect + ref 安全聚焦
必须等组件真实挂载、元素真实存在于 DOM 中，再调用 .focus()。但时机不对会报错或被拦截：
- 用
useEffect(() => { ref.current?.focus() }, [])，但需包裹if (typeof window !== 'undefined')避免 SSR 报错 - 不要直接
ref.current.focus()，先检查是否已被占用：if (ref.current && document.activeElement !== ref.current) - 移动端 Safari 要求聚焦必须发生在用户手势上下文内，若组件由路由自动跳转触发，需加一层容错：
setTimeout(() => ref.current?.focus(), 0)或requestAnimationFrame(() => ref.current?.focus()) - 避免和原生
autofocus冲突：删掉所有autofocus属性，只留 JS 控制路径
Vue 中 onMounted 调用 .focus() 的坑
Vue 3 的 onMounted 看似可靠，但懒加载组件可能因 Suspense 或 transition 导致实际渲染延迟：
立即学习“前端免费学习笔记（深入）”；
-
onMounted触发时，元素 DOM 可能尚未插入（尤其用了<Transition>或<Suspense>） - 推荐写法：
onMounted(() => nextTick(() => inputRef.value?.focus()))，nextTick确保 DOM 更新完成 - 如果 input 被
v-if条件控制，需确保条件为真后再调用；否则inputRef.value是null - 注意
tabindex="-1"会阻止.focus()生效（除非显式设tabindex="0"），但autofocus本身也不作用于tabindex="-1"元素
多个懒加载页面共用同一焦点逻辑时的冲突
当用户快速切换路由（比如从 /login → /register → /reset），前一个页面的 useEffect 或 onMounted 可能还没清理完，就触发下一个页面的聚焦，导致焦点乱跳甚至报错：
- React 中加 cleanup：
useEffect(() => { return () => { if (ref.current) ref.current.blur() } }, []) - Vue 中用
onBeforeUnmount主动 blur 当前 input，避免残留焦点干扰 - 更稳妥的做法：聚焦前判断当前路由是否仍是目标页，例如 React 中
const location = useLocation(); useEffect(() => { if (location.pathname === '/login') ref.current?.focus() }, [location]) - 不要依赖全局唯一 ID 或 class 查询，懒加载组件可能复用相同结构，造成多处同时聚焦
懒加载下的焦点控制，核心不是“怎么让 autofocus 工作”，而是承认它失效，并用 JS 在精确时机、带存在性检查、兼顾用户手势上下文的前提下主动聚焦——任何绕过这三者的方案，迟早会在 iOS Safari 或快速路由跳转中暴露问题。
