Vue.js 3.5.6 响应式系统中计算属性的递归同步监听问题解析

在 Vue.js 3.5.6 版本中，开发团队发现了一个与计算属性(computed)和同步监听器(watcher)相关的响应式系统问题。这个问题在特定条件下会导致计算属性无法正确更新，表现为渲染结果与预期不符。

问题现象

当使用同步监听器(watch 配置为 flush: 'sync')监听一个计算属性，并且该计算属性依赖其他响应式数据时，在某些情况下计算属性的更新会失效。具体表现为：

• 在 Vue.js 3.5.5 及更早版本中，渲染结果正确显示为 1
• 在 Vue.js 3.5.6 版本中，渲染结果错误地显示为 6

技术背景

Vue.js 的响应式系统核心依赖于依赖收集和触发更新的机制。计算属性作为响应式系统的重要组成部分，其内部实现包含两个关键部分：

1. ComputedRefImpl - 计算属性的实现类
2. dep - 依赖收集器

当计算属性的值发生变化时，系统会通过设置 NOTIFIED 标志位来标记需要更新的状态。这个标志位会同时设置在 ComputedRefImpl 实例和其对应的 dep 上。

问题根源

在 Vue.js 3.5.6 中，更新处理流程存在一个微妙的时序问题：

1. 当计算属性被通知更新时，系统会同时设置 ComputedRefImpl 和其 dep 的 NOTIFIED 标志位
2. 这些更新被批量处理，形成一个更新队列
3. 在 endBatch() 调用时，系统会先处理 dep 的更新：
   • 清除 dep 的 NOTIFIED 标志
   • 触发 trigger() 执行更新
4. 此时 ComputedRefImpl 的 NOTIFIED 标志仍然被设置，导致在 trigger() 执行期间无法再次被通知更新

这种标志位状态的不一致导致了计算属性在某些情况下无法正确响应变化。

解决方案

开发团队通过调整标志位的处理顺序和逻辑解决了这个问题。核心思路是确保在触发更新前，所有相关的标志位都处于正确的状态，避免因标志位不一致导致的更新失效。

影响范围

这个问题主要影响以下场景：

• 使用同步监听器(flush: 'sync')监听计算属性
• 计算属性之间存在依赖关系
• 更新触发存在递归或嵌套调用的情况

虽然同步监听器在实际开发中使用频率不高，但这种核心响应式系统的问题可能会以其他形式表现出来，因此及时修复非常重要。

最佳实践

对于开发者而言，可以注意以下几点：

1. 尽量避免过度使用同步监听器，除非有明确的需求
2. 对于复杂的计算属性依赖关系，考虑使用显式的响应式编程模式
3. 在升级 Vue.js 版本时，注意测试涉及计算属性和监听器的功能

这个问题在 Vue.js 3.5.6 中被发现并修复，再次展示了开源社区协作的力量和 Vue.js 团队对响应式系统稳定性的重视。