应将复杂逻辑移至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）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

{{ user.firstName + ' ' + user.lastName + '（' + (user.age >= 18 ? '成年' : '未成年') + '）' }}

改成计算属性后：

• 选项式 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）每次调用都会重算，哪怕数据根本没动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！