Vue计算属性是轻量化业务逻辑的天然载体，专注输入输出的纯映射，具备语义化封装、自动缓存、响应式组合和纯净无副作用四大特性。
Vue 计算属性是轻量化业务逻辑的天然载体——它不修改状态、不触发副作用、只专注“输入→输出”的纯映射，让复杂逻辑退回到可预测、可复用、可缓存的函数层面。
抽离模板中的硬编码表达式
模板里写 {{ user.name ? user.name.trim().toUpperCase() : '暂无姓名' }} 看似简单，但一旦多处使用或加入年龄判断、角色拼接等逻辑，就迅速失控。计算属性把这类字符串处理、条件组合封装成语义化字段：
- 定义 formattedName：统一处理空值、大小写、截断等规则
- 定义 userLabel：整合
name、role、status生成带图标的标签文本 - 模板中只写
{{ formattedName }}或{{ userLabel }}，一眼可知含义
用缓存避免重复计算
当一个派生值被多个地方消费（比如同时用于 v-if、:class、{{ }}），方法每次调用都执行一遍，而计算属性自动缓存结果：
- 比如 isEligible 判断用户是否满足活动参与条件（需校验 age、status、lastLogin）
- 即使在模板中用了 5 次
{{ isEligible }}，也只运行一次 getter - 只要依赖项没变，后续访问直接返回缓存值，零开销
组合响应式数据生成新状态
轻量逻辑常表现为“多个输入 → 一个确定输出”，这正是计算属性最擅长的场景：
立即学习“前端免费学习笔记（深入）”；
-
搜索过滤：基于
allItems和searchTerm返回filteredItems -
价格汇总：基于
cartItems数组实时算出totalPrice、itemCount、hasDiscount -
表单有效性：综合
email、password、confirmPassword输出formValid
保持逻辑纯净，拒绝副作用
轻量化的前提是“无污染”——计算属性必须是纯函数：
- ✅ 允许：读取
this.xxx，做判断、转换、聚合，返回新值 - ❌ 禁止：修改
this.count++、调用this.$http.get()、操作 DOM、console.log（调试除外） - 副作用该交给
methods显式触发，或用watch响应变化后执行
