计算属性性能更高，因其依赖变化时才重新执行并缓存结果；函数每次调用均无条件执行，无缓存机制。计算属性自动响应式联动、避免重复高开销运算，适合模板多处使用且逻辑较重的派生数据；函数适用于需传参、含副作用或异步操作的交互场景。
计算属性比函数性能更高，关键在于它只在依赖变化时重新执行，其余时候直接返回缓存值；函数每次调用都无条件执行，重复开销明显。
缓存机制决定执行频次
计算属性首次访问时运行 getter 并缓存结果，后续读取只要依赖（如 data 中的变量）没变，就跳过函数体、直接返回值。函数没有缓存逻辑，模板里写三次 {{ getFullName() }}，函数就被调用三次。
- 模板中频繁使用同一结果（比如页头、列表、统计栏都显示格式化后的价格），用计算属性能避免多次重复计算
- 函数内若含数组 filter + map、深克隆、正则匹配等操作，每次渲染都执行会拖慢页面响应
- 缓存失效由 Vue 自动追踪响应式依赖触发，无需手动判断或重置
内存占用差异不大，但资源消耗模式不同
计算属性本身几乎不额外占内存——缓存值只是 JS 对象的一个属性，通常几字节；函数也不“占内存”，但高频调用会增加 CPU 执行时间与调用栈压力。
- 真正影响内存的是你操作的数据规模（例如对 10 万条数据做排序），不是用了 computed 还是 methods
- 计算属性省的是重复计算的 CPU 时间，不是存储空间
- 对轻量逻辑（如拼接两个字符串），性能差异可忽略；对高开销逻辑，差异肉眼可见
响应式联动能力不可替代
计算属性自动收集依赖，当它用到的 data 或其它 computed 变更时，会精准触发视图更新。函数不具备该能力——它像纯工具函数，不会感知数据变化，也不会驱动重渲染。
- 模板中写 {{ list.filter(x => x.active).map(x => x.name) }}，每次渲染都执行整套链式操作
- 换成 computed: { activeNames() { return this.list.filter(...).map(...) } }，仅当 list 或其元素响应式属性变更才重算
- 在 watch 或事件回调中调用函数，仍需手动判断是否需要重算；而 computed 是声明式、自动化的
选型看场景，不是看“好坏”
不是计算属性一定优于函数，而是各自适合不同任务。
- 用计算属性：结果被模板多处使用、计算逻辑较重、需要响应式联动、逻辑纯派生（无副作用）
- 用函数：处理用户交互（如点击提交）、需要传参、含异步操作、有副作用（发请求、改 DOM、写 localStorage）
- 常见错误：给计算属性加括号调用、在 computed 中发请求、依赖非响应式数据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
