Vue3 useId 怎么生成 SSR 安全的唯一 ID？(3.5+)

Question

仓乃文 · Accepted Answer

SSR 场景中 Math.random() 或自增计数器生成的 ID 在服务端和客户端不一致，导致 hydration mismatch 警告。useId 生成跨端一致的唯一 ID，专门用于表单关联和无障碍属性。表单关联： ```javascript import { useId } from "vue"; const id = useId(); ``` 模板： ```html 用户名 ``` 多 ID 场景： ```javascript const baseId = useId(); const emailId = `${baseId}-email`; const phoneId = `${baseId}-phone`; ``` 补充说明： - useId 生成的 ID 格式如 v-0-1-2-3，SSR 和 CSR 完全一致 - 支持嵌套组件、Teleport、列表等复杂场景 - 不要用 useId 生成列表 key，key 应来自数据本身 - 不要用于安全/加密场景，它不是密码学安全的 - 适合 label-input 关联、aria 属性、表单字段 ID 等场景 - Vue 3.5+ 可用