computed 通过依赖追踪和惰性求值实现自动缓存，仅当响应式依赖变更时才重新计算，避免模板重复执行；对比 method 无缓存、普通变量无响应性，它兼顾响应性与性能。
Vue 3 中组件渲染性能问题常出现在模板里频繁执行复杂逻辑时，而 computed 的核心价值就在于它天然具备缓存能力——只要依赖的数据没变，就不会重复执行计算函数。这直接切断了“每次渲染都重算”的性能陷阱。
computed 如何精准拦截重复计算
computed 是基于响应式依赖的惰性求值机制。Vue 在首次访问时执行函数并缓存结果；后续访问时，仅当其内部引用的响应式数据（如 ref 或 reactive 属性）发生变化，才会触发重新求值。
- 对比方法（method）：每次模板渲染都会调用，无缓存，即使参数和状态完全不变
- 对比普通变量：无法自动响应数据变化，需手动更新，易出错且维护成本高
- computed 则兼顾响应性与性能：既随数据自动更新，又避免冗余执行
典型场景与写法示例
比如处理一个含上百条商品的列表，需要实时计算总价、筛选后数量、平均单价等：
const items = ref([{ price: 99 }, { price: 199 }, ...])
const totalPrice = computed(() => {
return items.value.reduce((sum, item) => sum + item.price, 0)
})
const filteredCount = computed(() => {
return items.value.filter(item => item.price > 100).length
})
只要 items.value 不发生变更（不是内容变，而是引用或长度/结构变），这两个 computed 就不会重新运行。哪怕你在模板中用了十次 {{ totalPrice }}，也只计算一次。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
进阶技巧：拆分与组合提升可维护性
当计算逻辑嵌套深或复用需求强时，可将中间结果也定义为 computed，形成计算链：
- 先用 computed 提取高过滤成本的子集：
const expensiveFiltered = computed(() => items.value.filter(...)) - 再基于它派生其他值：
const avgPrice = computed(() => expensiveFiltered.value.reduce(...) / expensiveFiltered.value.length) - 这样既保证各环节独立缓存，又避免重复 filter 操作
注意事项：别让 computed 变成性能瓶颈
computed 本身不慢，但若内部执行同步阻塞操作（如遍历万级数组、正则全局匹配、JSON.parse 大字符串），仍会卡住主线程。此时应：
- 确认是否真需在渲染阶段计算——能否预处理或交由 worker
- 检查依赖项是否过于宽泛（例如监听整个大型 reactive 对象，而实际只关心某几个字段）
- 必要时配合 shallowRef 或 markRaw 避免对静态大数据做响应式代理
