自动聚焦本质是时机与目标的匹配，需在dom可操作、元素已渲染且上下文合理时触发；应通过自定义指令精准识别目标节点，并针对不同ui库适配，结合条件触发、键盘导航兼容和移动端优化提升体验。

自动聚焦的本质是时机与目标的匹配

自动聚焦不是简单调用 focus() 方法，而是确保在 DOM 可操作、元素已渲染、且用户上下文合理时触发。Vue 的生命周期钩子（如 mounted）或指令钩子（如 inserted）提供了关键时机点；而“目标”则需准确识别——是直接绑定的 input，还是嵌套在 van-search、PrimeVue Select 等封装组件内部的真实输入节点。

用自定义指令精准控制聚焦行为

推荐封装一个健壮的局部指令，兼顾通用性与容错性：

• 在组件 directives 选项中定义 focus 指令
• inserted 钩子内先判断 el 是否为 INPUT 或 TEXTAREA，是则直接 el.focus()
• 否则尝试 el.querySelector('input, textarea')，找到即聚焦；未找到则给出友好提示（如 console.warn）
• 可加简单防抖逻辑，避免在 SSR 渲染或快速切换时重复聚焦

与 UI 组件库协同工作的关键细节

不同组件库对自动聚焦的处理差异很大，需针对性适配：

• PrimeVue Select：默认启用无障碍聚焦逻辑，禁用需组合使用 autofocus="false" + 手动 blur()，或在 mounted 中延迟清除焦点
• BootstrapVue / Buefy：多数输入类组件（如 b-input）支持原生 autofocus，但移动端 Safari 可能失效，此时必须依赖指令
• 自定义封装组件：建议暴露 autoFocus prop，并在子组件内部通过 v-focus 指令响应，保持接口统一

聚焦体验优化的三个实用技巧

真正提升可用性，不止于“让框有光标”，还需考虑场景逻辑：

• 条件触发：仅在编辑态、弹窗打开、搜索页首次加载等明确意图下启用自动聚焦，避免干扰用户当前操作
• 键盘导航兼容：确保聚焦后按 Tab 能自然进入下一个可交互元素，必要时设置 tabindex
• 移动端特殊处理：iOS Safari 对 autofocus 支持弱，且虚拟键盘弹出可能遮挡内容，建议配合 scrollIntoView({ behavior: 'smooth', block: 'nearest' }) 微调可视区域