计算属性不额外占用可观内存，仅缓存结果；普通变量始终驻留内存且每次赋值都触发更新。关键差异在于惰性求值与立即响应、是否复用、依赖追踪机制。
计算属性（computed）本身不额外占用可观内存，但会缓存执行结果；普通变量（如 data 中的响应式属性）始终保留在内存中，且每次赋值都会触发更新流程。关键差异不在“占多少内存”，而在于何时计算、是否复用、如何响应变化。
内存占用：本质不同，不可直接对比
计算属性不是独立存储的数据，它没有自己的响应式引用，底层依赖 getter 函数 + 缓存机制。首次访问时执行函数并缓存结果；后续访问只要依赖未变，就直接返回缓存值——这个缓存是轻量级的（一个 JS 对象属性），不会随组件实例长期驻留大量数据。
普通变量（比如 data() { return { list: [], filterKey: '' } }）则始终作为响应式对象的自有属性存在，无论是否被使用，都占用内存。若其中包含大数组或深层嵌套对象，内存开销由数据本身决定，与“是否是计算属性”无关。
- 计算属性的“内存成本”≈ 一个闭包函数 + 一个缓存字段（通常几字节）
- 普通变量的内存成本 ≈ 它所保存的实际数据结构大小
- 不要因为用了 computed 就以为“省了内存”——真正省的是重复计算，不是存储空间
更新行为：惰性求值 vs 立即响应
计算属性是惰性求值（lazy evaluation）：只有在模板或其它计算属性中被读取时才执行 getter；且仅当它所依赖的响应式数据发生变化时，才会重新求值并更新缓存。
立即学习“前端免费学习笔记（深入）”；
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
普通变量一旦被赋值（this.count = 5），Vue 立即标记为变更，并同步触发所有依赖它的 watcher（包括模板插值、watch 监听器、其他 computed）。即使新旧值相同（如 this.status = 'active' 赋了两次），也会走一遍更新流程（除非手写对比逻辑）。
- computed 不会因父组件重渲染而重新执行，只看自身依赖
- 普通变量每次
set都会触发依赖通知，可能引发不必要的更新链 - 把复杂逻辑放在 computed 里，能天然避免“无效更新”带来的性能浪费
什么时候该用 computed？看三个信号
当一个值满足以下任一条件，就该考虑用 computed 替代普通变量：
- 它由其它响应式数据派生而来（如
fullName基于firstName和lastName） - 它的计算过程较重（如过滤百条数据、格式化时间、递归遍历树）
- 你希望它自动保持最新且不手动维护同步逻辑（避免在多个
watch或生命周期中重复赋值）
反例：频繁写入、需初始化默认值、或需要在 created 中立即使用的状态（如 loading 标志），更适合放在 data 或 ref 中。
小技巧：避免 computed 的意外“不更新”
计算属性依赖追踪是基于响应式数据的读取行为。以下情况会导致缓存不刷新：
- 依赖的是非响应式对象（如通过
Object.freeze冻结的对象） - 依赖的是数组索引赋值（
arr[0] = newVal）或 length 修改——Vue 2 不支持，Vue 3 支持但需确保数组本身是 reactive - 依赖的是未声明在 data / setup 中的外部变量（如全局 const、闭包变量）
遇到“值变了但 computed 没更新”，优先检查依赖项是否真的被 Vue 追踪——用 console.log 打印依赖值，确认它们确实是响应式的。
