Logo

Vue3中如何优雅地实现input自动聚焦（完整解决方案）

author
YGHub·2025-02-14·1·字数：523 字·阅读时间：2 分钟

Vue Vue

在日常开发中，我们经常需要让某个输入框在页面加载后自动获得焦点。Vue3提供了多种方式来实现这个需求，今天我们就来聊聊几种常用的实现方法。

1. 使用 ref + mounted 方法

这是最基础也是最常用的方法，代码简单直观：

vue 
// AutoFocusInput.vue
<template>
  <input ref="inputRef" type="text" placeholder="请输入内容" />
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
 
const inputRef = ref(null)
 
onMounted(() => {
  inputRef.value.focus()
})
</script>
 

2. 使用自定义指令（v-focus）

如果你的项目中有多处需要自动聚焦的输入框，建议使用自定义指令：

ts 
// focus.ts
export const focus = {
  mounted: (el) => el.focus()
}
 

然后在你的组件中这样使用：

vue 
// AutoFocusInput.vue
<template>
  <input v-focus type="text" placeholder="请输入内容" />
</template>
 
<script setup>
import { focus } from '../directives/focus'
 
// 注册指令
const vFocus = focus
</script>
 

3. 使用 nextTick（处理异步渲染场景）

有时候因为数据异步加载，简单的mounted钩子可能不够用，这时可以配合nextTick：

vue 
 // AsyncAutoFocusInput
<template>
  <input v-if="showInput" ref="inputRef" type="text" placeholder="请输入内容" />
</template>
 
<script setup>
import { ref, nextTick } from 'vue'
 
const inputRef = ref(null)
const showInput = ref(false)
 
// 模拟异步显示输入框
setTimeout(() => {
  showInput.value = true
  nextTick(() => {
    inputRef.value?.focus()
  })
}, 1000)
</script>
 

实用小贴士

1.为什么要用nextTick？

  • 当数据改变时，DOM不会立即更新，nextTick可以确保在DOM更新后再执行focus操作

2.autofocus属性不香吗？

  • HTML的autofocus属性在某些场景下确实够用，但在SPA应用中可能不太可靠，特别是在路由切换时

  • 使用Vue的方式可以更灵活地控制聚焦时机

3.性能考虑

最佳实践建议

1.简单场景：直接使用ref + mounted

2.多处复用：使用自定义指令

3.异步场景：配合nextTick使用

4.表单场景：考虑使用自定义组件封装

总结

自动聚焦虽然是个小功能，但实现得好可以大大提升用户体验。选择哪种方案，主要取决于你的具体使用场景和项目需求。

Preview

1

点个赞 ~

Vue Vue

版权申明： © 本文著作权归YGHub所有，未经YGHub网授权许可，禁止第三方以任何形式转载和使用本文内容。

Related article

Next.js 认证方案深度对比：Next-Auth、Auth.js 与 Supabase Auth 的选择指南

YGHub

2025-03-15

4

为什么官方推荐 SWR 或 React Query 替代 useEffect 做数据获取？

YGHub

2025-03-15

2

Suspense 组件深度解析：异步渲染的优雅解决方案

YGHub

2025-03-15

2

React useActionState 深度解析：简化表单状态管理的终极工具

YGHub

2025-03-15

1

微信小程序实战：如何优雅地实现用户头像和昵称修改功能

YGHub

2025-02-15

1