computed计算属性是 Vue 3 中处理派生状态Derived State的核心利器。它的本质是“响应式数据的缓存计算器”。结合你已经学过的watch和methods我用“Excel 单元格公式”来类比原始数据是A1和B1计算属性就像SUM(A1:B1)——只有当A1或B1变了求和结果才会重新计算否则直接读缓存。下面我为你彻底拆解computed的语法、缓存机制、与watch/methods的本质区别以及TypeScript 中的类型陷阱。1. 基础语法只读计算属性在组合式 APIscript setup中computed接收一个getter 函数返回一个不可变的Ref对象。script setup langts import { ref, computed } from vue // 原始数据 const firstName ref(张) const lastName ref(三) // 计算属性返回全名 const fullName computed(() { return firstName.value lastName.value }) // 模板中直接用不需要 .value // 但在 JS 逻辑中访问需要 .value console.log(fullName.value) // 输出: 张三 /script template p{{ fullName }}/p !-- 自动解包显示 张三 -- /template核心特性只要firstName或lastName不变多次访问fullName.value会直接返回缓存结果不会重新执行 getter 函数。2. 进阶语法可写计算属性虽然 90% 的场景计算属性是只读的但你也可以定义一个setter实现“修改派生值影响原始值”的效果类似 Vuex 的commit。script setup langts const firstName ref(张) const lastName ref(三) const fullName computed({ // getter读取时触发 get: () firstName.value lastName.value, // setter赋值时触发比如 v-model 绑定 set: (newValue: string) { const names newValue.split( ) firstName.value names[0] || lastName.value names[1] || } }) // 当执行 fullName.value 李 四 时会触发 setter // 自动把 firstName 改为 李lastName 改为 四 /script template !-- 双向绑定可写计算属性非常优雅 -- input v-modelfullName / /template警告setter 里绝对不能修改计算属性本身即不能fullName.value xxx内部又触发 setter这会造成死循环。3.computedvsmethods缓存机制的降维打击这是面试最常问的对比我直接用代码演示性能差异script setup langts import { ref, computed } from vue const count ref(1) // 1. 计算属性有缓存 const computedDouble computed(() { console.log(计算属性重新计算了) return count.value * 2 }) // 2. 方法无缓存每次调用都重新执行 const methodDouble () { console.log(方法重新执行了) return count.value * 2 } /script template div !-- 在模板中调用 3 次计算属性 -- p{{ computedDouble }}/p !-- 打印 1 次 计算属性重新计算了 -- p{{ computedDouble }}/p !-- 直接读缓存不打印 -- p{{ computedDouble }}/p !-- 直接读缓存不打印 -- !-- 在模板中调用 3 次方法 -- p{{ methodDouble() }}/p !-- 打印 1 次 -- p{{ methodDouble() }}/p !-- 打印 1 次 -- p{{ methodDouble() }}/p !-- 打印 1 次 -- !-- 总共打印 3 次 -- /div /template结论methods适合事件处理或每次都需要重新计算的场景如带参数的格式化。computed适合依赖响应式数据且计算开销较大的场景如数组过滤、复杂数学计算。4.computedvswatch本质不同对比维度computedwatch定位派生新数据输入 → 输出执行副作用输入 → 触发动作是否有返回值✅必须 return❌ 没有返回值只执行逻辑缓存✅ 有缓存依赖不变就不重新计算❌ 无缓存只要数据变化就执行回调典型场景过滤列表、格式化文本、拼接姓名发 API 请求、打印日志、操作 DOM实战对比// ✅ 用 computed根据搜索词过滤列表派生新数组 const filteredList computed(() { return list.value.filter(item item.includes(searchKey.value)) }) // ✅ 用 watch搜索词变了去后端拉新数据执行副作用 watch(searchKey, (newKey) { fetchListByKey(newKey) // 发请求 })5. TypeScript 类型标注让 VSCode 精准提示computed在 TypeScript 中自动推导类型但遇到复杂对象或联合类型时需要显式标注。① 自动推导大多数情况够用const count ref(1) const double computed(() count.value * 2) // double 被自动推断为 ComputedRefnumber② 显式泛型处理可能返回null或undefined的情况// 假设返回可能是 User 对象或 null const user refUser | null(null) // 显式声明返回类型避免 TS 报错 const displayName computedstring(() { if (user.value) { return user.value.name } return 未登录 // 保证总是返回 string })③ 可写计算属性的类型Set 参数自动检查const fullName computedstring({ get: () firstName.value lastName.value, set: (newVal: string) { // newVal 被限定为 string // ... } })6. ⚠️ 致命陷阱新手必踩的 3 个坑陷阱 1在计算属性里修改其他响应式数据副作用// ❌ 绝对禁止 const count ref(0) const double computed(() { count.value // 在 getter 里改了别的响应式数据会触发无限循环 return count.value * 2 })原则计算属性的 getter必须是无副作用的纯函数只读不写。陷阱 2在模板中反复调用方法代替计算属性导致性能浪费!-- ❌ 不好每次渲染都重新计算且无法缓存 -- p{{ formatPrice(price) }}/p !-- ✅ 推荐用计算属性自动缓存 -- p{{ formattedPrice }}/p陷阱 3忘记.value尤其在script中const fullName computed(() firstName.value lastName.value) // ❌ 错误fullName 本身是一个 Ref 对象 console.log(fullName) // 输出 RefImpl 对象 // ✅ 正确必须取 .value console.log(fullName.value) // 输出 张三7. 结合你之前的代码给父组件添加计算属性在你的父组件中provideData有theme和version你可以派生一个新状态const provideData reactive({ theme: dark, version: 1.0.0, }) // 派生一个显示用的主题描述只读 const themeDescription computed(() { return provideData.theme dark ? 暗色模式 : ☀️ 亮色模式 })然后在模板中用{{ themeDescription }}显示当provideData.theme变化时描述自动更新。8. 性能优化进阶computed的懒计算computed是懒执行的即使依赖的数据变了如果没有任何地方访问computed的值它不会立即重新计算。只有当你真正去读.value或模板渲染它时它才会“迫不得已”重新计算。这比watch更高效watch是数据一变立即执行回调不管你用不用结果。总结记忆口诀computed是“缓存计算器”依赖不变不重算methods是“手动工具”每次调用都重算watch是“监控雷达”数据一变就触发动作。Getter 必须纯Setter 别自循环。现在去你的项目里找一个数组比如userList写一个computed来过滤出age 18的用户列表并尝试在模板中渲染。如果遇到 TS 类型报错记得加上泛型computed{...}[](() ...)