真正高效的做法是将计算逻辑从模板剥离交由JavaScript层统一管理：用computed替代模板长表达式、查找表代替多层条件判断、提前计算避免模板实时运算、命名常量替代魔法值。
模板里写太多逻辑，不是省事，是埋雷。真正高效的做法，是把计算逻辑从模板中剥离，交给 JavaScript 层统一管理。
用计算属性替代模板内长表达式
像 {{ !tab.mobileSett.list.enableLogout || tab.mobileSett.list.enableLogout && tab.mobileSett.list.enableLogout.value === '0' ? $t('common.n') : $t('common.y') }} 这类嵌套三元、多重取值的写法，既难读又难维护，还无法复用和缓存。
- 在 computed 中定义一个语义清晰的属性，比如 isLogoutEnabled，只负责解析真实开关状态
- 模板里直接写 {{ isLogoutEnabled ? $t('common.y') : $t('common.n') | filterP }}
- 响应式依赖自动追踪，结果自动缓存，多次渲染不重复执行
用查找表代替多层条件判断
状态码、角色类型、枚举文案等固定映射关系，不适合用 v-if 嵌套或三元链处理。
- 在 script 中声明映射对象：const statusText = { '1': '待付款', '2': '已发货', 'default': '未知' }
- 封装简单方法：getStatusText(status) { return statusText[status] ?? statusText.default }
- 模板调用 {{ getStatusText(item.status) }}，扩展新状态只需改对象，不碰逻辑
提前计算，避免模板实时运算
v-for 中调用 .filter().map() 或遍历大数组做格式化，会显著拖慢首次渲染和更新速度。
立即学习“前端免费学习笔记（深入）”；
- 在 onMounted 或 watch 中预先处理好数据，存入 ref 或 computed
- 模板只做展示，不参与任何耗时操作
- 对静态数据可配合 markRaw 跳过响应式代理，减少依赖追踪开销
命名常量替代魔法值
模板里出现 '0'、'guest'、12 这类值，会让后续接手的人摸不着头脑。
- 在 script 中定义语义化常量：const LOGOUT_DISABLED = '0' 或使用枚举对象
- 模板中直接引用，意图一目了然，也方便全局搜索和统一修改
- 同时降低硬编码引发的拼写错误和逻辑遗漏风险
