Vue 3 双大括号插值支持简单 JavaScript 表达式，如算术运算、字符串拼接、三元条件、方法调用和链式调用；不支持语句、赋值、声明及副作用操作，且变量须为 ref 或 reactive 响应式声明。

Vue 3 的双大括号 {{ }} 插值语法天然支持执行简单 JavaScript 表达式，只要它能求值为一个可转字符串的值，且不包含语句或副作用。

哪些表达式可以写

插值中允许使用以下类型表达式：

• 算术运算：如 {{ count + 1 }}、{{ price * quantity }}
• 字符串拼接：如 {{ firstName + ' ' + lastName }}
• 三元条件：如 {{ isActive ? '在线' : '离线' }}
• 方法调用（需在 setup 中定义并暴露）：如 {{ formatDate(createTime) }}
• 链式调用（仅限返回值可链的方法）：如 {{ message.split(' ').join('-') }}

哪些表达式不能写

插值只接受表达式，不支持语句、赋值或声明：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• ❌ {{ let x = 1 }} —— 变量声明语句，报错
• ❌ {{ if (ok) { return 'yes' } }} —— 控制流语句，不支持
• ❌ {{ user.name = 'Tom' }} —— 赋值操作，禁止且无效
• ❌ {{ console.log('test') }} —— 副作用函数调用，虽不报错但不推荐

变量必须是响应式的

只有通过 ref 或 reactive 声明的数据，才能在插值中实现响应更新：

立即学习“前端免费学习笔记（深入）”；

• ✅ 正确：const count = ref(5) → {{ count + 10 }} 会随 count.value 变化自动重渲染
• ❌ 错误：let count = 5 → {{ count + 10 }} 初始渲染后不再响应变化
• ⚠️ 注意：访问 reactive 对象属性时，直接写 {{ user.name }} 即可，无需 .value

复杂逻辑别放插值里

虽然技术上可行，但为了可读性、复用性和性能，应避免在 {{ }} 中塞复杂逻辑：

• 耗时计算（如遍历大数组、正则匹配）会阻塞渲染，建议移入 computed
• 带副作用或需复用的逻辑，应封装为 methods 或 computed
• 模板中只保留“一眼能懂”的表达式，比如 {{ items.length > 0 ? '有数据' : '空' }}