计算属性是Vue中用于派生、缓存、声明式更新的智能中间层，基于响应式依赖自动追踪、惰性求值、模板中自动解包，语义上专注“我是什么”，区别于watch（执行副作用）和method（无缓存调用）。
Vue 计算属性是响应式系统中专用于派生、缓存、声明式更新的核心机制，它既不是原始状态，也不是副作用触发器，而是处于“数据源”与“视图/逻辑使用方”之间的智能中间层。
它是响应式数据的“智能投影”
计算属性不持有独立状态，也不直接修改数据，而是基于一个或多个响应式依赖（如 ref、reactive 属性）实时推导出新值。Vue 会自动建立依赖关系图：只要所读取的响应式变量变化，计算属性就标记为“脏”，并在下次访问时重新求值。这种投影是被动的、可追踪的、零手动订阅的。
- 比如
fullName = computed(() => firstName.value + ' ' + lastName.value)，它天然绑定到firstName和lastName的变化，无需你写监听逻辑 - 它不像
watch那样主动“观察并执行”，也不像method那样每次调用都重跑——它只在必要时才动
它是模板与复杂逻辑之间的“性能隔离带”
当模板中需要展示加工后的数据（如筛选列表、格式化金额、判断权限状态），把逻辑硬塞进插值表达式或方法里，会导致重复执行、难以复用、视图臃肿。计算属性把这类逻辑提前声明、自动缓存，让模板保持简洁，同时避免渲染阶段的不必要开销。
- 例如
filteredList = computed(() => list.filter(item => item.status === 'active'))，即使模板中用了 5 次{{ filteredList }}，也只执行一次过滤 - 而同样逻辑写成方法
filterList() { return ... }，每次渲染都会调用，大数据量下明显卡顿
它是组合式 API 中“响应式契约”的典型体现
在 setup() 或 <script setup></script> 中，computed() 返回的是一个特殊的 ref（即计算属性 ref），它遵循和普通 ref 一致的使用规则：在 JS 中通过 .value 读写，在模板中自动解包。这使得它能无缝融入 Vue 的响应式链条——可被其他计算属性依赖、可传给子组件、可作为 watch 的源，构成可嵌套、可复用的数据流节点。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 你可以写
hasItems = computed(() => list.value.length > 0)，再用watch(hasItems, ...)做后续动作 - 也可以将
computed结果作为 prop 透传：<child :title="pageHeader"></child>，子组件照样响应更新
它不替代 watch，也不等价于 method，而是一种语义明确的“衍生值”抽象
Vue 明确划分了三类响应式工具的职责边界：
- computed：专注“我是什么”——返回一个确定的、可缓存的值，适合组合、映射、转换
- watch：专注“我要做什么”——响应变化执行副作用（发请求、改 DOM、写 localStorage）
- method：专注“我被调用时做什么”——无缓存、无依赖追踪，适合事件处理器或临时逻辑
选错位置，轻则性能浪费，重则逻辑错乱。比如用 watch 去拼接字符串，或用 method 替代高频使用的计算结果，都是偏离了它的设计定位。
