Vue 3组合式API：nextTick与updated钩子实现输入框自动聚焦该选谁？

我正在开发基于Vue 3（组合式API）的组件，需求为用户点击文本元素后切换为输入框，且输入框需在显示时立即获得焦点。

已测试两种可行方案：

1. 在editInput函数中使用nextTick()

import { ref, nextTick } from 'vue'

const editing = ref(false)
const input = ref(null)

function editInput() {
  editing.value = true
  nextTick(() => {
    input.value?.focus()
  })
}

2. 结合updated钩子实现v-focus指令

export const vFocus = {
  updated(el, binding) {
    if (binding.value) {
      el.focus()
    }
  }
}

搭配模板使用：

<input v-show="editing" v-focus="editing" />

两种方案均有效，请问应优先选择nextTick()还是updated钩子？二者在性能、可维护性上的优缺点是什么？是否存在更符合Vue风格的实现方案？

nextTick()方案 #

优点 #

• 逻辑集中：聚焦操作和切换编辑状态的逻辑绑定在一起，阅读代码时能直观看到触发编辑后立即执行聚焦的关联关系
• 性能更优：仅在主动触发editInput时执行一次聚焦操作，不会在组件其他更新场景下额外运行聚焦逻辑
• 精准控制：只在需要的时机（点击切换编辑时）执行，避免不必要的DOM操作

缺点 #

• 需要手动获取DOM引用：依赖ref绑定输入框，增加了组件内的DOM引用管理成本
• 逻辑耦合：聚焦逻辑和业务逻辑（切换编辑状态）混在一起，若后续需要复用聚焦逻辑，无法直接移植

updated钩子的v-focus指令方案 #

优点 #

• 复用性强：自定义指令可以在整个项目的任何需要自动聚焦的输入框中复用，无需重复编写nextTick逻辑
• 模板声明式：在模板中通过v-focus="editing"直接声明聚焦条件，符合Vue的声明式编程理念，直观易懂
• 无需手动管理DOM：指令内部自动处理DOM元素，组件内无需额外的ref引用

缺点 #

• 性能隐患：updated钩子会在组件每次更新时触发，即使是和editing无关的状态变更，指令也会执行判断逻辑，虽开销不大，但存在不必要的执行
• 触发时机不可控：只要组件更新且binding.value为true就会聚焦，可能在非预期场景下触发（比如父组件更新导致子组件重新渲染，此时editing未变化但指令仍会执行判断）

优先选择建议 #

如果只是单一组件的特定场景使用，nextTick()方案更轻便高效；如果项目中有多处需要“条件触发聚焦”的需求，推荐使用优化后的自定义指令方案。

优化版v-focus自定义指令 #

补充mounted钩子并增加状态变化判断，解决原方案的性能和初始化场景问题：

export const vFocus = {
  mounted(el, binding) {
    // 初始渲染时如果绑定值为true，立即聚焦
    if (binding.value) {
      el.focus()
    }
  },
  updated(el, binding) {
    // 仅当绑定值从false变为true时才触发聚焦，避免重复执行
    if (binding.value && !binding.oldValue) {
      el.focus()
    }
  }
}

模板使用不变：

<input v-show="editing" v-focus="editing" />

该方案兼顾了初始化聚焦需求，同时避免了不必要的重复执行，完全符合Vue声明式、可复用的设计风格，是通用场景下的最优选择。

组合式API的watch+nextTick方案 #

若需要在组件内拆分逻辑，可使用watch监听状态变化，实现逻辑解耦：

import { ref, watch, nextTick } from 'vue'

const editing = ref(false)
const input = ref(null)

function editInput() {
  editing.value = true
}

watch(editing, async (newVal) => {
  if (newVal) {
    await nextTick()
    input.value?.focus()
  }
})

这种方式把状态监听和聚焦逻辑分离，更符合组合式API的逻辑拆分理念，适合需要对editing状态做更多后续处理的场景。

内容的提问来源于stack exchange，提问作者DevMoutarde