useId() 生成稳定唯一 ID
最后更新：2026-10-22
useId() 生成稳定唯一 ID
useId() 返回每个组件实例稳定唯一的 ID 字符串：用于 label/for、aria 关联等可访问性属性，保证 SSR 与客户端一致。
| 分组 | 模板与辅助 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.5+ |
| SSR 支持 | 支持 |
📝 语法
const id = useId()
// <label :for="id">名称</label><input :id="id">返回值：唯一 ID 字符串（同实例内稳定）
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
两次渲染得到不同 ID，点标签文字能聚焦对应输入框。💡 要点
💡 提示 写可访问性友好的表单/弹窗组件时用它，避免手写随机 ID 造成 SSR 不一致。
⚠️ 注意 同一组件内多次调用会返回不同值（各调用点独立）；需要复用一个值就存变量。
ℹ️ 说明 3.5+ 新增；低版本可自行生成前缀 + 递增计数器替代。
🏷️ 相关模板与辅助
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 为什么不用 Math.random()？
A 随机值在 SSR 与客户端会不一致，导致注水不匹配；useId 保证两边相同。
Q ID 会随重渲染变化吗？
A 不会，同一实例内稳定。
Q 能自定义前缀吗？
A 函数本身不带前缀；如需特定格式可自行拼接。
