计算属性比方法更快，因其具备自动依赖追踪与结果缓存机制；方法每次调用均重新执行，无依赖收集与缓存，导致重复运算。

计算属性比方法更快，核心在于它有自动依赖追踪 + 结果缓存，而方法每次调用都从头执行，不记、不存、不省。

计算属性的缓存不是“手动存值”，而是响应式系统驱动的智能复用

Vue 在初始化计算属性时，会运行一次 getter 函数，并在此过程中收集它访问过的所有响应式数据（比如 this.count、this.list）。这些数据就成了它的“依赖”。之后只要这些依赖没变，再次读取该计算属性时，Vue 直接返回上次缓存的结果，跳过整个函数体执行。

• 依赖未变 → 不触发函数 → 毫秒级返回
• 依赖变化 → 标记为“脏” → 下次读取时才重新计算并更新缓存
• 多个地方使用同一个计算属性（如模板中三次 {{ fullName }}）→ 全部共享同一份缓存

方法为什么每次都要重算？

方法本质是普通函数调用。Vue 不会、也不能自动判断一个方法内部用了哪些数据——它既不追踪依赖，也不保存结果。哪怕你在模板里写十次 {{ getFullName() }}，每次渲染都会调用函数，哪怕 firstName 和 lastName 一动没动。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 没有依赖收集 → Vue 不知道该监听谁
• 没有缓存逻辑 → 每次都是全新执行
• 在 v-for 或条件分支中频繁调用 → 性能损耗明显放大

怎么真正用好这个缓存机制？

关键不在“写 computed”，而在“让依赖干净、稳定、可预测”：

• 避免在计算属性里调用非响应式外部变量或 Date.now()、Math.random()——它们不会被追踪，导致缓存失效或结果异常
• 对数组/对象深层属性做计算时，确保你访问的是响应式路径（例如 this.items[0].name 可以被追踪；但 this.getItems()[0].name 就不行，因为 getItems 是方法）
• 复杂过滤或排序逻辑适合放 computed：比如 filteredUsers 依赖 users 和 searchTerm，只要二者不变，列表就不重排
• 不要为了“看起来简洁”把带副作用的操作塞进 computed（如发请求、改 state、触发事件）——计算属性应是纯函数

一个典型对比场景

假设你要展示用户全名，并在页面上用了 4 次：

• 用方法：{{ getFullName() }} ×4 → 执行 4 次字符串拼接
• 用计算属性：{{ fullName }} ×4 → 执行 1 次，其余 3 次走缓存

当 fullName 依赖的数据每秒变化一次，而页面每 50ms 渲染一次时，方法会多执行近 20 倍无意义运算。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！