Vue计算属性性能优化关键在于避免缓存失效、依赖失控和计算爆炸：精简依赖路径、抽离并缓存递归逻辑、分离静态结构与动态状态、清除未使用项及副作用。

Vue 计算属性（computed）本身是为性能而生的——它自带缓存、按需更新。但一旦用法不当，反而会成为卡顿源头。关键不是少用 computed，而是避开那些让缓存失效、依赖失控、计算爆炸的典型场景。

避免全量依赖深层嵌套结构

当 computed 直接遍历整棵树或调用深度工具函数（如 flatMapDeep、cloneDeep），Vue 会为每个嵌套字段建立响应式依赖。一个子节点变动，整个 computed 就重跑——哪怕你只关心根节点的 name 字段。

• 只读取当前层级必要字段，比如 tree[0].name，而非 tree
• 对纯展示用的子树，用 toRaw() 或 markRaw() 脱离响应式追踪
• 需要监听某路径变化时，显式写出路径表达式：watch(() => tree.value?.children?.length, ...)

别在 computed 里写递归逻辑

递归函数天然重复调用，而 computed 不会自动 memoize 中间结果。每次触发都从头算起，节点越多越慢。

vue-component-analyzer

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

下载

• 把递归逻辑抽成独立函数，用 lodash.memoize 或自定义缓存（key = nodeId + params）
• 缓存 key 必须稳定：若 id 可能重复，加入父路径哈希或版本号（如 treeVersion）
• 不在 computed 函数体内直接展开递归调用，而是调用已缓存的函数

拆开静态结构和动态状态

把“不会变的关系”（如父子链、层级）和“总在变的状态”（如展开、选中、加载中）混在一起计算，会让整个 computed 对所有状态变更敏感。

立即学习“前端免费学习笔记（深入）”；

• 用 shallowReactive 或 markRaw 处理原始树数据，转为扁平 Map（Map<id, node>）
• 用独立 reactive 对象管理动态状态，例如 expanded: new Set()
• computed 只做组合：查 Map 获取结构 + 查 Set 获取状态，不参与任何判断或遍历

警惕未使用和副作用陷阱

没被模板或逻辑引用的 computed 仍会初始化并建立依赖；而在里面改数据、发请求、操作 DOM，不仅报错（Unexpected side effect），还会破坏缓存机制。

• 定期清理未使用的 computed，尤其在重构后检查模板和 methods 中是否还有引用
• 修改数据请交给 methods 或 watch；异步操作请移出 computed
• 需要响应式联动时，优先用 watch 按需更新，而不是靠 computed 强制重算