autofocus在vue/react异步组件中不生效，因浏览器仅在html初始解析时识别该属性，而组件挂载、ssr hydration及v-if渲染均发生在dom构建完成后，此时autofocus已失效；需手动调用focus()并校验可见性、焦点状态、用户手势上下文及滚动行为。
autofocus在Vue/React异步组件里为什么完全不生效
因为浏览器只在HTML初始解析阶段扫描autofocus属性，而Vue/React的组件挂载、SSR hydration、v-if条件渲染都发生在DOM构建完成之后——此时autofocus已成“死属性”，无论它是否真实存在于元素上，浏览器都不会重新识别。
常见现象：<input autofocus>写在Vue模板里，但组件onMounted后document.activeElement仍是body；React中useEffect里查ref.current发现元素存在，但光标没动。
- 不是框架bug，是浏览器规范行为：HTML解析是一次性过程，不可重放
- SSR输出带
autofocus也没用——hydration只是复用DOM节点，不触发二次解析 -
el.setAttribute('autofocus', '')或el.autofocus = true对已挂载元素完全无效
手动focus()调用必须绕开的四个坑
直接写input.focus()大概率失败，尤其在移动端或复杂布局下。关键不是“要不要调”，而是“什么时候调、怎么判、怎么防”。
- 先检查是否已被聚焦：
if (input && document.activeElement !== input) input.focus()，否则可能打断用户正在输入 - 确保元素可见：
getComputedStyle(input).display !== 'none' && getComputedStyle(input).visibility === 'visible' - iOS Safari强制要求用户手势上下文：不能在
useEffect或onMounted里裸调，得包裹在click、keydown等事件回调中 - 避免软键盘触发意外滚动：
input.focus({ preventScroll: true })（注意Safari 15.4+才支持，旧版需配合scrollIntoView({ block: 'nearest' })）
React/Vue中安全聚焦的钩子写法
框架生命周期钩子本身不等于“元素就绪”，必须叠加DOM更新确认机制。
- React：
useEffect(() => { if (ref.current && document.activeElement !== ref.current) { ref.current.focus({ preventScroll: true }); } }, [])——但要确保ref绑定的是最终渲染的节点，别绑在v-if条件分支外的空容器上 - Vue：
onMounted(() => { nextTick(() => { if (inputRef.value && document.activeElement !== inputRef.value) { inputRef.value.focus({ preventScroll: true }); } }); })——nextTick比setTimeout(() => ..., 0)更可靠，能等v-if/v-for真正完成 - 原生JS异步插入后：
el.insertAdjacentHTML('beforeend', '<input type="text" name="q">'); const input = el.querySelector('input[name="q"]'); requestAnimationFrame(() => input?.focus({ preventScroll: true }))——requestAnimationFrame比setTimeout更精准，且避开与原生autofocus冲突
焦点陷阱和无障碍的隐藏风险
自动聚焦不只是技术问题，更是交互责任。一个没处理好的focus()可能让用户迷失在页面里，尤其对屏幕阅读器用户。
- 模态框打开后聚焦第一个可操作元素是合理场景，但若该元素被
display: none父容器包裹，focus()会静默失败，且VoiceOver可能跳过整个区域 - 登录页自动聚焦密码框违反WCAG原则——用户还没看到标题和说明就进了输入状态，信息流被截断
- 顶部banner有
scroll-margin-top但没设，focus()触发滚动后输入框被header遮挡，iOS下更难手动修正 - 多个异步加载模块都试图聚焦自己区域的第一个
input，结果焦点在不同模块间跳来跳去，形成焦点陷阱
最麻烦的不是代码写错，而是“看起来能用”——它在Chrome桌面端跑通了，但在iOS Safari里静默失效，在VoiceOver下跳过关键内容，在用户连续点击两次按钮后突然把焦点抢走。这些都得靠document.activeElement实时校验和手势上下文兜底，而不是靠一次focus()调用就想完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
