应将复杂逻辑移出模板交由JavaScript层处理：用计算属性封装判断、查找表替代嵌套三元、预计算耗时操作、命名常量替代魔法值。
直接把复杂逻辑塞进模板里，看似省事，其实埋下维护和性能隐患。最有效的方式，是把计算过程从模板中移出来，交给 JavaScript 层统一处理。
用计算属性封装判断逻辑
像 value="!tab.mobileSett.list.enableLogout || tab.mobileSett.list.enableLogout&&tab.mobileSett.list.enableLogout.value == '0' ? filterP($t('common.n')) : filterP($t('common.y'))" 这类长表达式，应全部移到 computed 中。例如：
- 定义一个
isLogoutEnabled计算属性，只负责解析enableLogout的真实状态 - 在模板中直接写
{{ isLogoutEnabled ? $t('common.y') : $t('common.n') | filterP }} - 这样既清晰表达了意图，又复用了逻辑，还享受响应式缓存
把多条件映射转为查找表
涉及状态码、类型、角色等固定映射关系时，避免嵌套 if 或三元链。例如 status 显示文案：
- 声明一个对象：
const statusText = { '1': '待付款', '2': '已发货', 'default': '未知' } - 再写个简单方法：
getStatusText(status) { return statusText[status] ?? statusText.default } - 模板里调用
{{ getStatusText(item.status) }}，干净又易扩展
拆分耗时操作到初始化或 watch 中
如果逻辑包含过滤、格式化、查找等可能影响渲染速度的操作（比如对大数组 .filter().map()），不要在模板中实时执行：
- 在
onMounted或watch中预先计算好结果，存入 ref - 模板只读取已处理好的数据，不参与运算
- 对静态或低频变化的数据，还可配合
markRaw跳过响应式代理，进一步减负
用命名语义化替代魔法值和硬编码
模板里出现 '0'、12、'guest' 这类值，会降低可读性：
- 在 script 中定义常量，如
const LOGOUT_DISABLED = '0' - 或使用枚举对象：
const LogoutStatus = { ENABLED: '1', DISABLED: '0' } - 模板中写
v-if="config.logout === LogoutStatus.DISABLED"，一目了然
