Vue3 useTemplateRef 怎么替代 ref 获取 DOM？(3.5+)

Question

仓乃文 · Accepted Answer

传统 ref 获取 DOM 时，变量名必须和模板 ref 属性完全一致，写错就 undefined，且类型推断为 any。useTemplateRef 通过字符串 key 关联模板引用，变量名随意取，类型自动推导，还能在 Composable 中使用。

基础用法：
```javascript
import { useTemplateRef, onMounted } from "vue";
const inputEl = useTemplateRef("username");  // 变量名随意，key 对应模板
onMounted(() => {
  inputEl.value?.focus();  // 类型自动推导为 HTMLInputElement | null
});
```

模板：
```html
<input ref="username" placeholder="用户名" />
```

在 Composable 中封装：
```javascript
export function useFocus(refKey) {
  const target = useTemplateRef(refKey);
  const focus = () => nextTick(() => target.value?.focus());
  return { focus };
}
// 使用
const { focus } = useFocus("email");
```

补充说明：
- 传统 ref 声明 DOM 引用：const el = ref(null)，变量名必须和模板一致
- useTemplateRef 解耦了变量名和模板 ref 属性的绑定关系
- 返回只读的 ShallowRef，节点卸载后自动重置为 null
- v-for 动态引用：useTemplateRef(`item-${index}`)
- Vue 3.5+ 可用，旧版本继续用 ref(null) 获取 DOM