vue 中 ref 变量和自定义指令是两种独立机制：ref 用于手动控制 dom 元素（如动态聚焦特定输入框），自定义指令（如 v-focus）则封装自动聚焦逻辑，二者不应混用，否则破坏职责分离、增加耦合。
Vue 中 ref 变量和自定义指令不是“配合使用”的关系，而是两种独立、互不依赖的实现方式。ref 是 Vue 提供的响应式引用机制，用于在逻辑中访问 DOM 或组件实例；自定义指令（如 v-focus）则是封装 DOM 操作行为的抽象层，本身不依赖 ref。强行让两者“配合”，反而增加冗余、降低可维护性。
ref 方式：适合单次、可控、需手动触发的聚焦
适用于明确知道哪个输入框要聚焦、且时机由业务逻辑控制的场景（比如编辑表格某一行后聚焦该行输入框）：
- 模板中给 input 加 ref="inputRef"（Vue 3 Composition API 推荐用 ref(null)）
- 在 onMounted（或事件回调中）调用 inputRef.value?.focus()
- 若聚焦失效（如 iOS 或弹窗后），可加 setTimeout 或 requestAnimationFrame 延迟执行
自定义指令方式：推荐作为默认自动聚焦方案
真正省事、语义清晰、一次编写、随处可用。它不关心 ref，只关注“元素挂载即聚焦”：
- 局部使用：const vFocus = { mounted: (el) => el.focus() }，模板写
- 适配 el-input 等封装组件时，改用 el.querySelector('input')?.focus() 或 el.querySelector('.el-input__inner')?.focus()
- 更稳妥可加 requestAnimationFrame(() => input?.focus())，确保渲染完成后再聚焦
为什么不要混用 ref + 自定义指令做“自动聚焦”？
比如在指令里再去读 this.$refs.inputRef —— 这既违背指令设计初衷（指令应只操作绑定的 el），又引入了不必要的耦合和生命周期依赖。v-focus 的意义就在于：你只声明“我要这个元素一出现就聚焦”，不用管它叫什么 ref、也不用管它在哪 mounted。
特殊情况：需要动态聚焦多个 input 时，ref 才真正不可替代
例如表格每行一个输入框，点击“编辑”按钮后聚焦对应行的 input：
- 用 v-for 渲染时，为每个 input 绑定唯一 ref，如 :ref="(el) => { if (el) rowsRefs[index] = el }
- 点击编辑时，直接调用 rowsRefs[index]?.querySelector('input')?.focus()
- 此时自定义指令无法满足需求，因为聚焦目标是动态、条件性的，不是“所有 input 都要自动聚焦”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
