fix(reactivity): re-fix #10114 (#10123)

Author: johnsoncodehk

packages/reactivity/__tests__/computed.spec.ts

@@ -2,6 +2,7 @@ import { h, nextTick, nodeOps, render, serializeInner } from '@vue/runtime-test'
 import {
  type DebuggerEvent,
  ITERATE_KEY,
+ ReactiveEffect,
  TrackOpTypes,
  TriggerOpTypes,
  type WritableComputedRef,
@@ -454,14 +455,10 @@ describe('reactivity/computed', () => {
  expect(fnSpy).toBeCalledTimes(2)
  })
 
- it('...', () => {
- const fnSpy = vi.fn()
+ it('should chained recurse effects clear dirty after trigger', () => {
  const v = ref(1)
  const c1 = computed(() => v.value)
- const c2 = computed(() => {
- fnSpy()
- return c1.value
- })
+ const c2 = computed(() => c1.value)
 
  c1.effect.allowRecurse = true
  c2.effect.allowRecurse = true
@@ -471,6 +468,60 @@ describe('reactivity/computed', () => {
  expect(c2.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
  })
 
+ it('should chained computeds dirtyLevel update with first computed effect', () => {
+ const v = ref(0)
+ const c1 = computed(() => {
+ if (v.value === 0) {
+ v.value = 1
+ }
+ return v.value
+ })
+ const c2 = computed(() => c1.value)
+ const c3 = computed(() => c2.value)
+
+ c3.value
+
+ expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+ expect(c2.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
+ expect(c3.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
+ })
+
+ it('should work when chained(ref+computed)', () => {
+ const v = ref(0)
+ const c1 = computed(() => {
+ if (v.value === 0) {
+ v.value = 1
+ }
+ return 'foo'
+ })
+ const c2 = computed(() => v.value + c1.value)
+ expect(c2.value).toBe('0foo')
+ expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+ expect(c2.value).toBe('1foo')
+ })
+
+ it('should trigger effect even computed already dirty', () => {
+ const fnSpy = vi.fn()
+ const v = ref(0)
+ const c1 = computed(() => {
+ if (v.value === 0) {
+ v.value = 1
+ }
+ return 'foo'
+ })
+ const c2 = computed(() => v.value + c1.value)
+
+ effect(() => {
+ fnSpy()
+ c2.value
+ })
+ expect(fnSpy).toBeCalledTimes(1)
+ expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+ expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+ v.value = 2
+ expect(fnSpy).toBeCalledTimes(2)
+ })
+
  it('should be not dirty after deps mutate (mutate deps in computed)', async () => {
  const state = reactive<any>({})
  const consumer = computed(() => {

packages/reactivity/src/computed.ts

@@ -1,4 +1,4 @@
-import { type DebuggerOptions, ReactiveEffect } from './effect'
+import { type DebuggerOptions, ReactiveEffect, scheduleEffects } from './effect'
 import { type Ref, trackRefValue, triggerRefValue } from './ref'
 import { NOOP, hasChanged, isFunction } from '@vue/shared'
 import { toRaw } from './reactive'
@@ -44,6 +44,7 @@ export class ComputedRefImpl<T> {
  this.effect = new ReactiveEffect(
  () => getter(this._value),
  () => triggerRefValue(this, DirtyLevels.MaybeDirty),
+ () => this.dep && scheduleEffects(this.dep),
  )
  this.effect.computed = this
  this.effect.active = this._cacheable = !isSSR
@@ -59,6 +60,9 @@ export class ComputedRefImpl<T> {
  }
  }
  trackRefValue(self)
+ if (self.effect._dirtyLevel >= DirtyLevels.MaybeDirty) {
+ triggerRefValue(self, DirtyLevels.MaybeDirty)
+ }
  return self._value
  }
 

packages/reactivity/src/effect.ts

@@ -291,13 +291,9 @@ export function triggerEffects(
 ) {
  pauseScheduling()
  for (const effect of dep.keys()) {
- if (dep.get(effect) !== effect._trackId) {
- // when recurse effect is running, dep map could have outdated items
- continue
- }
  if (
  effect._dirtyLevel < dirtyLevel &&
- !(effect._runnings && !effect.allowRecurse)
+ dep.get(effect) === effect._trackId
  ) {
  const lastDirtyLevel = effect._dirtyLevel
  effect._dirtyLevel = dirtyLevel
@@ -309,14 +305,21 @@ export function triggerEffects(
  effect.trigger()
  }
  }
+ }
+ scheduleEffects(dep)
+ resetScheduling()
+}
+
+export function scheduleEffects(dep: Dep) {
+ for (const effect of dep.keys()) {
  if (
  effect.scheduler &&
  effect._shouldSchedule &&
- (!effect._runnings || effect.allowRecurse)
+ (!effect._runnings || effect.allowRecurse) &&
+ dep.get(effect) === effect._trackId
  ) {
  effect._shouldSchedule = false
  queueEffectSchedulers.push(effect.scheduler)
  }
  }
- resetScheduling()
 }