可直接用计算属性名配合模板字符串生成动态键，需用方括号包裹模板字符串；错误写法是裸写模板字符串作键；Vue 中结合 useId() 与计算属性名可生成稳定、语义化的唯一 ID。
可以直接在对象字面量中用计算属性名配合模板字符串生成动态键，但要注意：模板字符串本身不能直接当键写在对象里，必须包裹在方括号中作为表达式求值。
计算属性名 + 模板字符串的正确写法
ES6 的计算属性名语法允许把任意表达式（包括模板字符串）放在 [ ] 里，结果会转为字符串并用作属性名。这是最简洁、声明式的方式。
- ✅ 正确示例：
const key = "userName";<br>const obj = { [`prefix-${key}`]: "Alice" };<br>// → { "prefix-userName": "Alice" } - ❌ 错误写法：
{ `prefix-${key}`: "Alice" }—— 会报语法错误，因为模板字符串不能裸写在键位置
在 Vue 组件中生成唯一 ID 的典型场景
比如需要为表单项生成带前缀的唯一 ID，同时保证与 label 关联。结合 useId() 和计算属性名可兼顾稳定性和语义化。
- 用 useId() 获取基础唯一值（SSR 安全）
const baseId = useId(); // 如 "v-1a2b3c4d" - 再用模板字符串拼接语义前缀，作为动态键或属性值：
const formField = { [`input-${baseId}`]: "text" }; - 模板中绑定：
<label :for="`input-${baseId}`">姓名</label><br><input :id="`input-${baseId}`" type="text">
避免常见陷阱
动态键本质是运行时求值，所以要确保表达式结果是字符串或 Symbol。模板字符串天然满足这点，但需注意变量是否已定义、是否为空或 null。
- 空值风险：
const name = undefined;<br>{ [`user-${name}`]: "test" } // → { "user-undefined": "test" }
建议加默认值：`user-${name || 'default'}` - 不推荐在循环中反复创建新对象来“生成 ID”，ID 应该是组件级稳定的值；如需多个字段 ID，可用一个 useId() 配合不同后缀生成
本质上，计算属性名不是生成 ID 的工具，而是让 ID 能自然融入对象结构的语法桥梁。真正负责唯一性的，仍是 useId()、时间戳或随机字符串等源头逻辑。
