feat(reactivity): more efficient reactivity system (#5912)

fix #311, fix #1811, fix #6018, fix #7160, fix #8714, fix #9149, fix #9419, fix #9464

packages/reactivity/__tests__/computed.spec.ts

@@ -184,7 +184,7 @@ describe('reactivity/computed', () => {
  // mutate n
  n.value++
  // on the 2nd run, plusOne.value should have already updated.
- expect(plusOneValues).toMatchObject([1, 2, 2])
+ expect(plusOneValues).toMatchObject([1, 2])
  })
 
  it('should warn if trying to set a readonly computed', () => {
@@ -288,4 +288,167 @@ describe('reactivity/computed', () => {
  oldValue: 2
  })
  })
+
+ // https://github.com/vuejs/core/pull/5912#issuecomment-1497596875
+ it('should query deps dirty sequentially', () => {
+ const cSpy = vi.fn()
+
+ const a = ref<null | { v: number }>({
+ v: 1
+ })
+ const b = computed(() => {
+ return a.value
+ })
+ const c = computed(() => {
+ cSpy()
+ return b.value?.v
+ })
+ const d = computed(() => {
+ if (b.value) {
+ return c.value
+ }
+ return 0
+ })
+
+ d.value
+ a.value!.v = 2
+ a.value = null
+ d.value
+ expect(cSpy).toHaveBeenCalledTimes(1)
+ })
+
+ // https://github.com/vuejs/core/pull/5912#issuecomment-1738257692
+ it('chained computed dirty reallocation after querying dirty', () => {
+ let _msg: string | undefined
+
+ const items = ref<number[]>()
+ const isLoaded = computed(() => {
+ return !!items.value
+ })
+ const msg = computed(() => {
+ if (isLoaded.value) {
+ return 'The items are loaded'
+ } else {
+ return 'The items are not loaded'
+ }
+ })
+
+ effect(() => {
+ _msg = msg.value
+ })
+
+ items.value = [1, 2, 3]
+ items.value = [1, 2, 3]
+ items.value = undefined
+
+ expect(_msg).toBe('The items are not loaded')
+ })
+
+ it('chained computed dirty reallocation after trigger computed getter', () => {
+ let _msg: string | undefined
+
+ const items = ref<number[]>()
+ const isLoaded = computed(() => {
+ return !!items.value
+ })
+ const msg = computed(() => {
+ if (isLoaded.value) {
+ return 'The items are loaded'
+ } else {
+ return 'The items are not loaded'
+ }
+ })
+
+ _msg = msg.value
+ items.value = [1, 2, 3]
+ isLoaded.value // <- trigger computed getter
+ _msg = msg.value
+ items.value = undefined
+ _msg = msg.value
+
+ expect(_msg).toBe('The items are not loaded')
+ })
+
+ // https://github.com/vuejs/core/pull/5912#issuecomment-1739159832
+ it('deps order should be consistent with the last time get value', () => {
+ const cSpy = vi.fn()
+
+ const a = ref(0)
+ const b = computed(() => {
+ return a.value % 3 !== 0
+ })
+ const c = computed(() => {
+ cSpy()
+ if (a.value % 3 === 2) {
+ return 'expensive'
+ }
+ return 'cheap'
+ })
+ const d = computed(() => {
+ return a.value % 3 === 2
+ })
+ const e = computed(() => {
+ if (b.value) {
+ if (d.value) {
+ return 'Avoiding expensive calculation'
+ }
+ }
+ return c.value
+ })
+
+ e.value
+ a.value++
+ e.value
+
+ expect(e.effect.deps.length).toBe(3)
+ expect(e.effect.deps.indexOf((b as any).dep)).toBe(0)
+ expect(e.effect.deps.indexOf((d as any).dep)).toBe(1)
+ expect(e.effect.deps.indexOf((c as any).dep)).toBe(2)
+ expect(cSpy).toHaveBeenCalledTimes(2)
+
+ a.value++
+ e.value
+
+ expect(cSpy).toHaveBeenCalledTimes(2)
+ })
+
+ it('should trigger by the second computed that maybe dirty', () => {
+ const cSpy = vi.fn()
+
+ const src1 = ref(0)
+ const src2 = ref(0)
+ const c1 = computed(() => src1.value)
+ const c2 = computed(() => (src1.value % 2) + src2.value)
+ const c3 = computed(() => {
+ cSpy()
+ c1.value
+ c2.value
+ })
+
+ c3.value
+ src1.value = 2
+ c3.value
+ expect(cSpy).toHaveBeenCalledTimes(2)
+ src2.value = 1
+ c3.value
+ expect(cSpy).toHaveBeenCalledTimes(3)
+ })
+
+ it('should trigger the second effect', () => {
+ const fnSpy = vi.fn()
+ const v = ref(1)
+ const c = computed(() => v.value)
+
+ effect(() => {
+ c.value
+ })
+ effect(() => {
+ c.value
+ fnSpy()
+ })
+
+ expect(fnSpy).toBeCalledTimes(1)
+ v.value = 2
+ expect(fnSpy).toBeCalledTimes(2)
+ })
 })

packages/reactivity/__tests__/deferredComputed.spec.ts

@@ -1,57 +1,32 @@
-import { computed, deferredComputed, effect, ref } from '../src'
+import { computed, effect, ref } from '../src'
 
 describe('deferred computed', () => {
- const tick = Promise.resolve()
-
- test('should only trigger once on multiple mutations', async () => {
+ test('should not trigger if value did not change', () => {
  const src = ref(0)
- const c = deferredComputed(() => src.value)
+ const c = computed(() => src.value % 2)
  const spy = vi.fn()
  effect(() => {
  spy(c.value)
  })
  expect(spy).toHaveBeenCalledTimes(1)
- src.value = 1
  src.value = 2
- src.value = 3
- // not called yet
- expect(spy).toHaveBeenCalledTimes(1)
- await tick
- // should only trigger once
- expect(spy).toHaveBeenCalledTimes(2)
- expect(spy).toHaveBeenCalledWith(c.value)
- })
 
- test('should not trigger if value did not change', async () => {
- const src = ref(0)
- const c = deferredComputed(() => src.value % 2)
- const spy = vi.fn()
- effect(() => {
- spy(c.value)
- })
- expect(spy).toHaveBeenCalledTimes(1)
- src.value = 1
- src.value = 2
-
- await tick
  // should not trigger
  expect(spy).toHaveBeenCalledTimes(1)
 
  src.value = 3
- src.value = 4
  src.value = 5
- await tick
  // should trigger because latest value changes
  expect(spy).toHaveBeenCalledTimes(2)
  })
 
- test('chained computed trigger', async () => {
+ test('chained computed trigger', () => {
  const effectSpy = vi.fn()
  const c1Spy = vi.fn()
  const c2Spy = vi.fn()
 
  const src = ref(0)
- const c1 = deferredComputed(() => {
+ const c1 = computed(() => {
  c1Spy()
  return src.value % 2
  })
@@ -69,19 +44,18 @@ describe('deferred computed', () => {
  expect(effectSpy).toHaveBeenCalledTimes(1)
 
  src.value = 1
- await tick
  expect(c1Spy).toHaveBeenCalledTimes(2)
  expect(c2Spy).toHaveBeenCalledTimes(2)
  expect(effectSpy).toHaveBeenCalledTimes(2)
  })
 
- test('chained computed avoid re-compute', async () => {
+ test('chained computed avoid re-compute', () => {
  const effectSpy = vi.fn()
  const c1Spy = vi.fn()
  const c2Spy = vi.fn()
 
  const src = ref(0)
- const c1 = deferredComputed(() => {
+ const c1 = computed(() => {
  c1Spy()
  return src.value % 2
  })
@@ -98,26 +72,24 @@ describe('deferred computed', () => {
  src.value = 2
  src.value = 4
  src.value = 6
- await tick
- // c1 should re-compute once.
- expect(c1Spy).toHaveBeenCalledTimes(2)
+ expect(c1Spy).toHaveBeenCalledTimes(4)
  // c2 should not have to re-compute because c1 did not change.
  expect(c2Spy).toHaveBeenCalledTimes(1)
  // effect should not trigger because c2 did not change.
  expect(effectSpy).toHaveBeenCalledTimes(1)
  })
 
- test('chained computed value invalidation', async () => {
+ test('chained computed value invalidation', () => {
  const effectSpy = vi.fn()
  const c1Spy = vi.fn()
  const c2Spy = vi.fn()
 
  const src = ref(0)
- const c1 = deferredComputed(() => {
+ const c1 = computed(() => {
  c1Spy()
  return src.value % 2
  })
- const c2 = deferredComputed(() => {
+ const c2 = computed(() => {
  c2Spy()
  return c1.value + 1
  })
@@ -139,17 +111,17 @@ describe('deferred computed', () => {
  expect(c2Spy).toHaveBeenCalledTimes(2)
  })
 
- test('sync access of invalidated chained computed should not prevent final effect from running', async () => {
+ test('sync access of invalidated chained computed should not prevent final effect from running', () => {
  const effectSpy = vi.fn()
  const c1Spy = vi.fn()
  const c2Spy = vi.fn()
 
  const src = ref(0)
- const c1 = deferredComputed(() => {
+ const c1 = computed(() => {
  c1Spy()
  return src.value % 2
  })
- const c2 = deferredComputed(() => {
+ const c2 = computed(() => {
  c2Spy()
  return c1.value + 1
  })
@@ -162,14 +134,13 @@ describe('deferred computed', () => {
  src.value = 1
  // sync access c2
  c2.value
- await tick
  expect(effectSpy).toHaveBeenCalledTimes(2)
  })
 
- test('should not compute if deactivated before scheduler is called', async () => {
+ test('should not compute if deactivated before scheduler is called', () => {
  const c1Spy = vi.fn()
  const src = ref(0)
- const c1 = deferredComputed(() => {
+ const c1 = computed(() => {
  c1Spy()
  return src.value % 2
  })
@@ -179,7 +150,6 @@ describe('deferred computed', () => {
  c1.effect.stop()
  // trigger
  src.value++
- await tick
  expect(c1Spy).toHaveBeenCalledTimes(1)
  })
 })