Vue模板中只支持JavaScript表达式，不支持语句和流控制；正确示例为{{ count + 1 }}、{{ isActive ? 'active' : 'inactive' }}，错误示例为{{ if (count > 0) { return 'yes' } }}、{{ let x = 1 }}。

Vue 模板中的 JavaScript 表达式写在双大括号 {{ }} 或指令（如 v-if、v-bind）的值里，但不是任意 JS 代码都能写，它只支持表达式（expression），不支持语句（statement）和流控制（如 if、for）。掌握这个边界，是写出可维护模板的关键。

只允许表达式，禁止语句和声明

表达式会返回一个值，比如 a + b、items.filter(x => x.active)、message.toUpperCase()；而语句（如 if (a) { ... }、let x = 1、function foo() {}）在模板中直接写会报错。

• ✅ 正确：{{ count + 1 }}、{{ isActive ? 'active' : 'inactive' }}、{{ users.map(u => u.name).join(', ') }}
• ❌ 错误：{{ if (count > 0) { return 'yes' } }}、{{ let x = 1 }}、{{ for (let i = 0; i

方法调用和计算属性优先于内联逻辑

复杂逻辑别堆在模板里。比如格式化日期、拼接用户名、权限判断等，应封装为方法或计算属性，保持模板简洁可读。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 推荐写法：在 methods 中定义 formatTime(timestamp)，模板中写 {{ formatTime(post.time) }}
• 推荐写法：用计算属性 computed: { canEdit() { return this.user.role === 'admin' || this.post.authorId === this.user.id } }}，模板中写 v-if="canEdit"
• 避免写法：v-if="user.role === 'admin' || post.authorId === user.id"（重复、难复用、不易测试）

安全使用三元与逻辑运算符

三元运算符 ? : 和逻辑运算符 &&、|| 是模板中最常用、最安全的内联逻辑工具，适合简单条件渲染或默认值处理。

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

• 显示默认文案：{{ user.name || '匿名用户' }}
• 条件类名：:class="[isActive ? 'active' : '', hasError ? 'error' : '']"
• 条件渲染内容：{{ isLoading ? '加载中...' : `共 ${list.length} 条` }}
• 注意：foo && bar() 中，若 foo 为假值，bar() 不会执行——这是短路特性，合理利用可避免报错

避免在模板中访问副作用或修改响应式数据

模板表达式应是“纯”的：只读取数据、不修改状态、不发起请求、不触发 alert/console 等副作用。

• ❌ 危险：{{ updateUserStatus() }}（每次重渲染都调用，可能重复提交）
• ❌ 危险：{{ items.push(newItem) }}（改变原数组，且返回 length 值，语义混乱）
• ✅ 正确：把修改逻辑放在事件处理器（如 @click="addUser"）或 watch/computed 中