Vue2项目升级Firestore SDK10后查询性能骤降问题排查

问题现象 #

将Vue2项目的Firestore SDK从8.x版本升级到10.x版本后，出现以下性能异常：

• 单独执行请求1：返回约2000条数据，耗时约2000ms
• 单独执行请求2：返回约4000条数据，耗时约5000ms
• 请求1完成后发起请求2：请求2耗时骤增至约50000ms，Chrome性能面板显示defineReactive函数占用大量CPU时间
• 对请求返回的数据使用Object.freeze()处理后，性能恢复正常

核心原因 #

1. Vue2响应式机制的固有开销 #

Vue2基于Object.defineProperty实现响应式，会递归遍历对象的所有可枚举属性，为每个属性添加getter/setter监听。当数据量庞大、对象层级深或包含复杂类型时，递归遍历的计算开销会急剧上升。

2. Firestore 10.x返回数据的结构变化 #

升级到10.x版本后，Firestore返回的文档对象（包括其中的DocumentReference类型字段）相比8.x版本新增了大量内部嵌套属性，且这些属性均为可枚举状态。

当请求1已将2000条数据加入Vue实例的响应式数据this.projectList后，再加载请求2的4000条数据时：

• Vue需要同时处理新数据的所有属性的响应式转换，还要在更新依赖时遍历已有2000条数据的全部响应式属性，双重叠加导致计算量暴增，耗时直接飙升10倍。

3. Object.freeze()的修复逻辑 #

Object.freeze()会冻结目标对象，使其所有属性变为不可修改且不可枚举。Vue2的响应式系统会自动跳过对冻结对象的defineReactive处理，彻底避免了递归遍历的开销，因此性能恢复正常。

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