如何检测并规避Vue计算属性中的循环依赖问题

针对Vue3计算属性循环依赖问题，可通过以下方案系统性检测和规避：

• 开发环境内置告警：Vue3开发模式默认自带递归更新检测，出现明显循环依赖时会在控制台抛出 Maximum recursive updates exceeded 错误，错误信息会标注触发异常的组件名与相关属性，可作为初步排查的直接依据。
• 浏览器调试工具定位：出现页面卡死或异常重复更新时，打开调试工具的性能面板录制短时间的执行日志，或在报错时查看调用堆栈，可快速定位到反复被调用的计算属性函数，顺着调用链梳理即可找到循环依赖的节点。
• ESLint规则前置拦截：开启eslint-plugin-vue的vue/no-side-effects-in-computed-properties等规则，也可自定义规则检测计算属性内部是否引用了其他计算属性，在编码阶段即可发现简单的同组件循环依赖问题。
• 状态管理Devtools排查：如果用到Pinia或Vuex，打开官方Devtools的状态更新追踪功能，查看状态变更的触发链路，可快速定位跨组件、跨全局状态的长链路循环依赖。

• 严格遵循单向数据流：所有计算属性的依赖必须是基础响应式数据（ref/reactive/data/prop），禁止计算属性依赖其他派生状态（其他计算属性、store getter），如果需要聚合多状态计算，直接引用根数据源，避免多层计算属性嵌套。
• 复用逻辑抽离为纯函数：将需要复用的计算逻辑封装为无副作用的纯工具函数，接收基础数据作为入参返回结果，不要在计算属性内直接调用其他计算属性，需要复用逻辑时直接传入对应基础数据调用纯函数即可。
• 禁止派生状态反向修改上游：不要在计算属性、watch回调中修改自身的依赖源，也不要通过emit、store提交等方式反向修改上游状态，所有状态修改只能由用户交互、异步请求等原始触发源发起，走从上到下的单向更新链路。
• 复杂依赖场景用watch显式声明：如果确实需要依赖其他派生状态，使用watch显式声明监听目标，可通过immediate、once等参数控制更新逻辑，避免隐式循环触发，同时也能在Devtools中清晰查看监听触发链路。
• 共享状态统一收敛：多组件共享的状态统一托管到Pinia等全局状态管理工具，组件内部仅做基础数据的消费，不要在多个组件分别维护派生状态再互相同步，从根源上避免跨组件的依赖循环。

内容的提问来源于stack exchange，提问作者Nechoj