计算属性性能优于普通函数，因其基于依赖变化的缓存机制，仅在响应式数据变更时重新计算，避免重复执行；普通函数每次调用均无条件执行，高开销逻辑下显著拖慢渲染。
计算属性比普通函数性能开销更低，核心在于缓存机制——它只在依赖变化时重新执行，而普通函数每次调用都无条件执行。
缓存 vs 无缓存：执行频次决定性能差异
计算属性首次访问时执行 getter 函数并缓存结果；后续读取只要依赖项（如 data 中的变量）未变，就直接返回缓存值，不触发函数体。普通函数没有缓存逻辑，模板中每渲染一次、JS 中每次调用，都会完整执行一遍。
- 比如模板里写三次
{{ fullName }}，计算属性只执行一次 getter；写三次{{ getFullName() }}，函数就被调用三次 - 若函数内含复杂遍历、深克隆或正则匹配，重复执行会明显拖慢渲染
- 缓存失效仅由响应式依赖触发（Vue 自动追踪 data/computed/ref），无需手动管理
内存占用并不悬殊，但资源消耗模式不同
计算属性本身几乎不额外占内存——它本质是一个带缓存字段的 getter 函数，缓存值只是 JS 对象的一个属性（通常几字节）。普通函数也不“占内存”，但频繁调用会增加 CPU 执行时间与调用栈压力。
- 真正影响内存的是你操作的数据本身（例如大数组 filter 后的结果），不是“用 computed 还是 methods”
- 计算属性省的是重复计算的 CPU 时间和渲染等待，不是存储空间
- 对轻量逻辑（如拼接两个字符串），性能差异可忽略；对高开销逻辑，差异显著
响应式联动能力：计算属性天然支持依赖追踪
计算属性自动收集依赖，当它用到的 data 属性或其它 computed 变化时，会精准触发更新。普通函数不具备该能力——它像一个纯工具函数，不会感知数据变化，也不会驱动视图重算。
- 你在模板中使用
{{ list.filter(...).map(...) }}，每次渲染都执行整套链式操作 - 换成
computed: { filteredList() { return this.list.filter(...).map(...) } }，仅当list或其元素响应式属性变更时才重算 - watch 或事件回调中调用函数，仍需手动判断是否需要重算，而 computed 是声明式、自动化的
适用场景建议
不是“哪个更好”，而是“哪个更合适”。选计算属性当满足以下任一条件：
- 结果被模板多处使用（如页头、列表、统计栏都用同一个格式化金额）
- 计算逻辑较重（如树形结构扁平化、大数据集分页过滤）
- 需要与 Vue 响应式系统深度协同（例如作为 v-model 的 getter/setter）
- 逻辑是纯派生的、无副作用的（不发请求、不改 DOM、不写 localStorage）
保留普通函数用于事件处理、异步操作、带副作用的任务，或仅在单点临时调用的简单逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
