fix(reactivity): should not recompute if computed does not track reactive data

packages/reactivity/__tests__/computed.spec.ts

@@ -1012,6 +1012,42 @@ describe('reactivity/computed', () => {
     expect(cValue.value).toBe(1)
   })
 
+  test('should not recompute when condition changes if computed does not track reactive data', async () => {
+    const spy = vi.fn()
+    const lookup = computed(() => {
+      spy()
+      return {
+        g: 'foo',
+      }
+    })
+
+    const unit = ref('')
+    const display = computed(() => {
+      if (!unit.value) return 'empty'
+      // @ts-expect-error
+      return lookup.value[unit.value]
+    })
+
+    function toggle() {
+      unit.value = unit.value === 'g' ? '' : 'g'
+    }
+
+    expect(display.value).toBe('empty')
+    expect(spy).toHaveBeenCalledTimes(0)
+
+    toggle()
+    expect(display.value).toBe('foo')
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    toggle()
+    expect(display.value).toBe('empty')
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    toggle()
+    expect(display.value).toBe('foo')
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
   test('computed should remain live after losing all subscribers', () => {
     const state = reactive({ a: 1 })
     const p = computed(() => state.a + 1)

packages/reactivity/src/effect.ts

@@ -49,6 +49,7 @@ export enum EffectFlags {
   DIRTY = 1 << 4,
   ALLOW_RECURSE = 1 << 5,
   PAUSED = 1 << 6,
+  FORCE_TRIGGER = 1 << 7,
 }
 
 /**
@@ -364,7 +365,8 @@ function isDirty(sub: Subscriber): boolean {
 export function refreshComputed(computed: ComputedRefImpl): undefined {
   if (
     computed.flags & EffectFlags.TRACKING &&
-    !(computed.flags & EffectFlags.DIRTY)
+    !(computed.flags & EffectFlags.DIRTY) &&
+    !(computed.flags & EffectFlags.FORCE_TRIGGER)
   ) {
     return
   }
@@ -386,13 +388,12 @@ export function refreshComputed(computed: ComputedRefImpl): undefined {
   if (
     dep.version > 0 &&
     !computed.isSSR &&
-    computed.deps &&
+    !(computed.flags & EffectFlags.FORCE_TRIGGER) &&
     !isDirty(computed)
   ) {
     computed.flags &= ~EffectFlags.RUNNING
     return
   }
-
   const prevSub = activeSub
   const prevShouldTrack = shouldTrack
   activeSub = computed
@@ -413,6 +414,7 @@ export function refreshComputed(computed: ComputedRefImpl): undefined {
     shouldTrack = prevShouldTrack
     cleanupDeps(computed)
     computed.flags &= ~EffectFlags.RUNNING
+    computed.flags &= ~EffectFlags.FORCE_TRIGGER
   }
 }
 

packages/reactivity/src/ref.ts

@@ -19,6 +19,7 @@ import {
 import type { ComputedRef, WritableComputedRef } from './computed'
 import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
 import { warn } from './warning'
+import { EffectFlags } from './effect'
 
 declare const RefSymbol: unique symbol
 export declare const RawSymbol: unique symbol
@@ -186,6 +187,9 @@ class RefImpl<T = any> {
 export function triggerRef(ref: Ref): void {
   // ref may be an instance of ObjectRefImpl
   if ((ref as unknown as RefImpl).dep) {
+    if ((ref as unknown as RefImpl).dep.computed) {
+      ;(ref as any).flags |= EffectFlags.FORCE_TRIGGER
+    }
     if (__DEV__) {
       ;(ref as unknown as RefImpl).dep.trigger({
         target: ref,