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 ? '有数据' : '空' }}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
