使用自定义指令 v-focus 可在 Vue 组件挂载后自动聚焦 input 元素，相比 ref + mounted 更解耦、可复用且符合 Vue 声明式设计哲学；支持条件聚焦、SSR 兼容及延迟聚焦等进阶场景。
在 Vue 应用中，让某个 <input> 元素在组件挂载后自动获得焦点，只需一个自定义指令就能干净、复用、无副作用地实现。
为什么不用 ref + mounted？
虽然用 ref 获取 DOM 并调用 .focus() 能工作，但它把逻辑耦合在组件内部，每次都需要重复写；而自定义指令将“聚焦行为”封装成声明式能力，像内置指令 v-model 一样直接写在模板里，更符合 Vue 的设计哲学。
创建 v-focus 自定义指令（Vue 3 Composition API）
在项目任意位置（如 src/directives/focus.js）定义：
export const vFocus = {
mounted(el) {
el.focus()
}
}
然后在 main.js 中全局注册：
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
立即学习“前端免费学习笔记（深入）”；
import { createApp } from 'vue'
import { vFocus } from './directives/focus'
import App from './App.vue'
const app = createApp(App)
app.directive('focus', vFocus)
app.mount('#app')
在模板中使用 v-focus
直接加在需要自动聚焦的输入框上即可：
<template>
<input v-focus type="text" placeholder="页面一打开就在这里输入" />
</template>
支持条件聚焦（比如只在首次进入时聚焦）：
- 加个布尔值参数：
v-focus="shouldFocus"，并在指令中判断 - 配合
v-if控制元素是否渲染，避免聚焦到已销毁的 DOM - 若 input 是异步加载或由
v-show控制显隐，需改用updated钩子并加防抖
进阶：支持 autofocus 失效场景（如 SSR 或动态表单）
原生 autofocus 在服务端渲染或某些 UI 框架中可能不生效。自定义指令能确保在客户端真实 DOM 就绪后执行：
- 指令的
mounted钩子保证 DOM 已插入文档流 - 对 Modal 内的 input，可配合
nextTick确保动画完成后再聚焦 - 需要延迟聚焦（例如等待键盘弹出），可用
setTimeout包裹el.focus()
