计算属性名是ES6语法糖，用于对象字面量中动态生成键名，创建时立即求值并转为字符串或Symbol；支持变量、模板字符串、函数调用等，但不可加引号、不支持异步，常用于响应式配置与API参数构建。
计算属性名（Computed Property Names）是 ES6 提供的语法糖，专用于对象字面量中动态生成键名。它不是运行时赋值，而是在对象创建那一刻就完成求值和绑定，天然适合构建响应式、可配置、结构清晰的对象。
基础写法：用变量或表达式生成键名
在对象字面量的键位置写 [表达式]，JavaScript 会立即执行该表达式，并把结果转为字符串（或 Symbol）作为键名。表达式可以是变量、模板字符串、函数调用等，但不能加引号——加引号就变成固定字符串键了。
-
变量直接使用：
const key = 'email'; const user = { [key]: 'a@b.com' };→{ email: 'a@b.com' } -
字符串拼接：
const prefix = 'user'; const obj = { [`${prefix}Status`]: 'online' };→{ userStatus: 'online' } -
函数调用：
const getProp = () => 'createdAt'; const item = { [getProp()]: new Date() };→{ createdAt: Date }
配合响应式场景：构建动态配置或 API 参数
在 Vue 或状态管理中，常需根据用户输入、表单字段或业务规则生成结构化对象。计算属性名让这类逻辑更内聚、无副作用。
- 从 DOM 或表单获取字段名与值：
const field = inputEl.name; const value = inputEl.value; const payload = { [field]: value }; - 批量生成带前缀的字段：
['name', 'phone', 'address'].reduce((acc, key) => ({ ...acc, [`user${key.charAt(0).toUpperCase() + key.slice(1)}`]: formData[key] }), {}) - 与 Symbol 结合实现私有键：
{ [Symbol('internalId')]: 123, name: 'test' }，避免被遍历或意外覆盖
常见陷阱与注意事项
计算属性名虽简洁，但容易因类型或时机误用导致键名异常。
-
结果为 null/undefined 会被转成字符串：
const k = null; { [k]: 'x' }→{ null: 'x' }，建议提前校验 -
仅适用于对象字面量初始化：不能用于已存在对象的点号赋值或解构左侧，如
obj.[key] = val或const { [key]: v } = obj都会报错 -
不支持异步表达式：方括号内必须是同步可求值表达式，
[await fetchKey()]无效，需先 await 再构造对象 - 与普通键共存时注意逗号分隔：多个计算属性名之间、或与静态键之间必须用逗号，否则语法错误
替代方案对比：什么时候该用方括号赋值？
若需在对象创建后动态添加属性（比如循环注入、条件追加），应改用方括号赋值语法：obj[key] = value。它更灵活，适用于增量更新；而计算属性名更适合一次性声明、结构明确的响应式对象。
- ✅ 适合计算属性名：
const config = { [mode]: true, [`api${env.toUpperCase()}`]: url }; - ✅ 适合方括号赋值：
const filters = {}; Object.keys(raw).forEach(k => { if (shouldInclude(k)) filters[k] = raw[k]; });
