应将复杂逻辑移至computed中处理，模板仅保留简洁变量名；因模板内写复杂表达式会导致臃肿难读、重复冗余、无缓存性能差、无法调试；迁移分三步：明确依赖→定义计算属性→模板直接使用。
直接把复杂逻辑从模板里抽出来，放到 computed 里处理，模板只留干净的变量名。这样既清晰又高效，还能复用、调试、缓存。
为什么不能在模板里写复杂表达式
比如反转字符串、拼接多字段、嵌套三元、权限判断等，硬塞进 {{ }} 或 v-if 会导致：
- 模板臃肿难读，一眼看不出业务意图
- 同一段逻辑在多个地方重复，改一处漏一处
- 每次渲染都重新执行，没有缓存，性能浪费
- 无法打断点调试，出问题只能靠猜
怎么把逻辑搬到 computed 里
三步走：明确依赖 → 定义计算属性 → 模板中直接用。
- 先看哪些数据会影响结果，比如
user.role、permissions、isLocked - 在
computed中起个语义化名字，如canEdit、fullName、discountedPrice - 返回值可以是布尔、字符串、对象甚至数组，模板里就写
v-if="canEdit"或{{ fullName }}
实际例子对比
原始模板（不推荐）：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
<p>{{ user.firstName + ' ' + user.lastName + '（' + (user.age >= 18 ? '成年' : '未成年') + '）' }}</p>改成计算属性后：
-
选项式 API：
fullNameAndStatus() { return `${this.user.firstName} ${this.user.lastName}（${this.user.age >= 18 ? '成年' : '未成年'}）`; } -
组合式 API：
const fullNameAndStatus = computed(() => `${user.value.firstName} ${user.value.lastName}（${user.value.age >= 18 ? '成年' : '未成年'}）`); - 模板中只需：
<p>{{ fullNameAndStatus }}</p>
不只是简化显示，还能优化性能
计算属性有自动缓存机制。只要 user.firstName、user.lastName、user.age 都没变，多次访问 fullNameAndStatus 就不会重新执行函数。而方法（methods）每次调用都会重算，哪怕数据根本没动。
