effect.spec

effect 作为 reactive 的核心，重要程序不可言喻，主要负责监听响应式数据的变化，触发监听函数的执行逻辑，两句话就能描述清楚的概念，单测文件就长达700多行，下面让我们一起来看详细用例

文档直通车: https://vue3js.cn/vue-composition-api/#reactive

  1. 传递给effect的方法，会立即执行一次 
  1. it('should run the passed function once (wrapped by a effect)', () => {
  2.   const fnSpy = jest.fn(() => {})
  3.   effect(fnSpy)
  4.   expect(fnSpy).toHaveBeenCalledTimes(1)
  5. })

  1. 在 effect 执行将 observe 对基本类型赋值，observe 进行改变时，将反应到基本类型上

    1. it('should observe basic properties', () => {
    2. let dummy
    3. const counter = reactive({ num: 0 })
    4. effect(() => (dummy = counter.num))
    6. expect(dummy).toBe(0)
    7. counter.num = 7
    8. expect(dummy).toBe(7)
    9. })

  2. 同上，不过我们从这个单测就能看出来effect 中是有 cache 存在的

    1. it('should observe multiple properties', () => {
    2. let dummy
    3. const counter = reactive({ num1: 0, num2: 0 })
    4. effect(() => (dummy = counter.num1 + counter.num1 + counter.num2))
    6. expect(dummy).toBe(0)
    7. counter.num1 = counter.num2 = 7
    8. expect(dummy).toBe(21)
    9. })

  3. 在多个 effect 中处理 observe，当 observe 发生改变时，将同步到多个 effect

    1. it('should handle multiple effects', () => {
    2. let dummy1, dummy2
    3. const counter = reactive({ num: 0 })
    4. effect(() => (dummy1 = counter.num))
    5. effect(() => (dummy2 = counter.num))
    7. expect(dummy1).toBe(0)
    8. expect(dummy2).toBe(0)
    9. counter.num++
    10. expect(dummy1).toBe(1)
    11. expect(dummy2).toBe(1)
    12. })

  4. 嵌套的 observe 做出改变时，也会产生响应

    1. it('should observe nested properties', () => {
    2. let dummy
    3. const counter = reactive({ nested: { num: 0 } })
    4. effect(() => (dummy = counter.nested.num))
    6. expect(dummy).toBe(0)
    7. counter.nested.num = 8
    8. expect(dummy).toBe(8)
    9. })

  5. 在 effect 执行将 observe 对基本类型赋值，observe 进行删除操作时，将反应到基本类型上 

    1. it('should observe delete operations', () => {
    2. let dummy
    3. const obj = reactive({ prop: 'value' })
    4. effect(() => (dummy = obj.prop))
    6. expect(dummy).toBe('value')
    7. delete obj.prop
    8. expect(dummy).toBe(undefined)
    9. })

  6. 在 effect 执行将 observe in 操作，observe 进行删除操作时，将反应到基本类型上

    1. it('should observe has operations', () => {
    2. let dummy
    3. const obj = reactive<{ prop: string | number }>({ prop: 'value' })
    4. effect(() => (dummy = 'prop' in obj))
    6. expect(dummy).toBe(true)
    7. delete obj.prop
    8. expect(dummy).toBe(false)
    9. obj.prop = 12
    10. expect(dummy).toBe(true)
    11. })

  7. 对 prototype 的操作也能响应

    1. it('should observe properties on the prototype chain', () => {
    2. let dummy
    3. const counter = reactive({ num: 0 })
    4. const parentCounter = reactive({ num: 2 })
    5. Object.setPrototypeOf(counter, parentCounter)
    6. effect(() => (dummy = counter.num))
    8. expect(dummy).toBe(0)
    9. delete counter.num
    10. expect(dummy).toBe(2)
    11. parentCounter.num = 4
    12. expect(dummy).toBe(4)
    13. counter.num = 3
    14. expect(dummy).toBe(3)
    15. })

9.

  1. it('should observe inherited property accessors', () => {
  2.   let dummy, parentDummy, hiddenValue: any
  3.   const obj = reactive<{ prop?: number }>({})
  4.   const parent = reactive({
  5.     set prop(value) {
  6.       hiddenValue = value
  7.     },
  8.     get prop() {
  9.       return hiddenValue
  10.     }
  11.   })
  12.   Object.setPrototypeOf(obj, parent)
  13.   effect(() => (dummy = obj.prop))
  14.   effect(() => (parentDummy = parent.prop))
  16.   expect(dummy).toBe(undefined)
  17.   expect(parentDummy).toBe(undefined)
  18.   obj.prop = 4
  19.   expect(dummy).toBe(4)
  20.   // this doesn't work, should it?
  21.   // expect(parentDummy).toBe(4)
  22.   parent.prop = 2
  23.   expect(dummy).toBe(2)
  24.   expect(parentDummy).toBe(2)
  25. })

  1. 对 function 的操作也能响应

    1. it('should observe function call chains', () => {
    2. let dummy
    3. const counter = reactive({ num: 0 })
    4. effect(() => (dummy = getNum()))
    6. function getNum() {
    7. return counter.num
    8. }
    10. expect(dummy).toBe(0)
    11. counter.num = 2
    12. expect(dummy).toBe(2)
    13. })

  2. 对 iteration 响应

    1. it('should observe iteration', () => {
    2. let dummy
    3. const list = reactive(['Hello'])
    4. effect(() => (dummy = list.join(' ')))
    6. expect(dummy).toBe('Hello')
    7. list.push('World!')
    8. expect(dummy).toBe('Hello World!')
    9. list.shift()
    10. expect(dummy).toBe('World!')
    11. })

  3. 数组隐式的变化可以响应 ```js it(‘should observe implicit array length changes’, () => { let dummy const list = reactive([‘Hello’]) effect(() => (dummy = list.join(‘ ‘)))

    expect(dummy).toBe(‘Hello’) list[1] = ‘World!’ expect(dummy).toBe(‘Hello World!’) list[3] = ‘Hello!’ expect(dummy).toBe(‘Hello World! Hello!’) })

it(‘should observe sparse array mutations’, () => { let dummy const list = reactive([]) list[1] = ‘World!’ effect(() => (dummy = list.join(‘ ‘)))

expect(dummy).toBe(‘ World!’) list[0] = ‘Hello’ expect(dummy).toBe(‘Hello World!’) list.pop() expect(dummy).toBe(‘Hello’) })

  2. 13. 计算操作可以被响应
  3. ```js
  4. it('should observe enumeration', () => {
  5.   let dummy = 0
  6.   const numbers = reactive<Record<string, number>>({ num1: 3 })
  7.   effect(() => {
  8.     dummy = 0
  9.     for (let key in numbers) {
  10.       dummy += numbers[key]
  11.     }
  12.   })
  14.   expect(dummy).toBe(3)
  15.   numbers.num2 = 4
  16.   expect(dummy).toBe(7)
  17.   delete numbers.num1
  18.   expect(dummy).toBe(4)
  19. })

  1. Symbol 类型可以响应

    1. it('should observe symbol keyed properties', () => {
    2. const key = Symbol('symbol keyed prop')
    3. let dummy, hasDummy
    4. const obj = reactive({ [key]: 'value' })
    5. effect(() => (dummy = obj[key]))
    6. effect(() => (hasDummy = key in obj))
    8. expect(dummy).toBe('value')
    9. expect(hasDummy).toBe(true)
    10. obj[key] = 'newValue'
    11. expect(dummy).toBe('newValue')
    12. delete obj[key]
    13. expect(dummy).toBe(undefined)
    14. expect(hasDummy).toBe(false)
    15. })

  2. well-known symbol 不能被观察 

    1. it('should not observe well-known symbol keyed properties', () => {
    2. const key = Symbol.isConcatSpreadable
    3. let dummy
    4. const array: any = reactive([])
    5. effect(() => (dummy = array[key]))
    7. expect(array[key]).toBe(undefined)
    8. expect(dummy).toBe(undefined)
    9. array[key] = true
    10. expect(array[key]).toBe(true)
    11. expect(dummy).toBe(undefined)
    12. })

  3. function 的变更可以响应 

    1. it('should observe function valued properties', () => {
    2. const oldFunc = () => {}
    3. const newFunc = () => {}
    5. let dummy
    6. const obj = reactive({ func: oldFunc })
    7. effect(() => (dummy = obj.func))
    9. expect(dummy).toBe(oldFunc)
    10. obj.func = newFunc
    11. expect(dummy).toBe(newFunc)
    12. })

  4. this 会被响应 ```js it(‘should observe chained getters relying on this’, () => { const obj = reactive({ a: 1, get b() { return this.a } })

    let dummy effect(() => (dummy = obj.b)) expect(dummy).toBe(1) obj.a++ expect(dummy).toBe(2) })

it(‘should observe methods relying on this’, () => { const obj = reactive({ a: 1, b() { return this.a } })

let dummy effect(() => (dummy = obj.b())) expect(dummy).toBe(1) obj.a++ expect(dummy).toBe(2) })

  2. 18.  
  3. ```js
  4. it('should not observe set operations without a value change', () => {
  5.   let hasDummy, getDummy
  6.   const obj = reactive({ prop: 'value' })
  8.   const getSpy = jest.fn(() => (getDummy = obj.prop))
  9.   const hasSpy = jest.fn(() => (hasDummy = 'prop' in obj))
  10.   effect(getSpy)
  11.   effect(hasSpy)
  13.   expect(getDummy).toBe('value')
  14.   expect(hasDummy).toBe(true)
  15.   obj.prop = 'value'
  16.   expect(getSpy).toHaveBeenCalledTimes(1)
  17.   expect(hasSpy).toHaveBeenCalledTimes(1)
  18.   expect(getDummy).toBe('value')
  19.   expect(hasDummy).toBe(true)
  20. })

  1. 改变原始对象不产生响应 ```js it(‘should not observe raw mutations’, () => { let dummy const obj = reactive<{ prop?: string }>({}) effect(() => (dummy = toRaw(obj).prop))

    expect(dummy).toBe(undefined) obj.prop = ‘value’ expect(dummy).toBe(undefined) })

it(‘should not be triggered by raw mutations’, () => { let dummy const obj = reactive<{ prop?: string }>({}) effect(() => (dummy = obj.prop))

expect(dummy).toBe(undefined) toRaw(obj).prop = ‘value’ expect(dummy).toBe(undefined) })

it(‘should not be triggered by inherited raw setters’, () => { let dummy, parentDummy, hiddenValue: any const obj = reactive<{ prop?: number }>({}) const parent = reactive({ set prop(value) { hiddenValue = value }, get prop() { return hiddenValue } }) Object.setPrototypeOf(obj, parent) effect(() => (dummy = obj.prop)) effect(() => (parentDummy = parent.prop))

expect(dummy).toBe(undefined) expect(parentDummy).toBe(undefined) toRaw(obj).prop = 4 expect(dummy).toBe(undefined) expect(parentDummy).toBe(undefined) })

  2. 20. 可以避免隐性递归导致的无限循环
  3. ```js 
  4. it('should avoid implicit infinite recursive loops with itself', () => {
  5.   const counter = reactive({ num: 0 })
  7.   const counterSpy = jest.fn(() => counter.num++)
  8.   effect(counterSpy)
  9.   expect(counter.num).toBe(1)
  10.   expect(counterSpy).toHaveBeenCalledTimes(1)
  11.   counter.num = 4
  12.   expect(counter.num).toBe(5)
  13.   expect(counterSpy).toHaveBeenCalledTimes(2)
  14. })
  16. it('should avoid infinite loops with other effects', () => {
  17.   const nums = reactive({ num1: 0, num2: 1 })
  19.   const spy1 = jest.fn(() => (nums.num1 = nums.num2))
  20.   const spy2 = jest.fn(() => (nums.num2 = nums.num1))
  21.   effect(spy1)
  22.   effect(spy2)
  23.   expect(nums.num1).toBe(1)
  24.   expect(nums.num2).toBe(1)
  25.   expect(spy1).toHaveBeenCalledTimes(1)
  26.   expect(spy2).toHaveBeenCalledTimes(1)
  27.   nums.num2 = 4
  28.   expect(nums.num1).toBe(4)
  29.   expect(nums.num2).toBe(4)
  30.   expect(spy1).toHaveBeenCalledTimes(2)
  31.   expect(spy2).toHaveBeenCalledTimes(2)
  32.   nums.num1 = 10
  33.   expect(nums.num1).toBe(10)
  34.   expect(nums.num2).toBe(10)
  35.   expect(spy1).toHaveBeenCalledTimes(3)
  36.   expect(spy2).toHaveBeenCalledTimes(3)
  37. })

  1. 可以显式递归调用

    1. it('should allow explicitly recursive raw function loops', () => {
    2. const counter = reactive({ num: 0 })
    3. const numSpy = jest.fn(() => {
    4. counter.num++
    5. if (counter.num < 10) {
    6.   numSpy()
    7. }
    8. })
    9. effect(numSpy)
    10. expect(counter.num).toEqual(10)
    11. expect(numSpy).toHaveBeenCalledTimes(10)
    12. })

  2. 每次返回的都是新函数

    1. it('should return a new reactive version of the function', () => {
    2. function greet() {
    3. return 'Hello World'
    4. }
    5. const effect1 = effect(greet)
    6. const effect2 = effect(greet)
    7. expect(typeof effect1).toBe('function')
    8. expect(typeof effect2).toBe('function')
    9. expect(effect1).not.toBe(greet)
    10. expect(effect1).not.toBe(effect2)
    11. })

  3. 当结果未发生变动时不做处理，发生改变时应该产生响应 ```js it(‘should discover new branches while running automatically’, () => { let dummy const obj = reactive({ prop: ‘value’, run: false })

    const conditionalSpy = jest.fn(() => { dummy = obj.run ? obj.prop : ‘other’ }) effect(conditionalSpy)

    expect(dummy).toBe(‘other’) expect(conditionalSpy).toHaveBeenCalledTimes(1) obj.prop = ‘Hi’ expect(dummy).toBe(‘other’) expect(conditionalSpy).toHaveBeenCalledTimes(1) obj.run = true expect(dummy).toBe(‘Hi’) expect(conditionalSpy).toHaveBeenCalledTimes(2) obj.prop = ‘World’ expect(dummy).toBe(‘World’) expect(conditionalSpy).toHaveBeenCalledTimes(3) })

it(‘should discover new branches when running manually’, () => { let dummy let run = false const obj = reactive({ prop: ‘value’ }) const runner = effect(() => { dummy = run ? obj.prop : ‘other’ })

expect(dummy).toBe(‘other’) runner() expect(dummy).toBe(‘other’) run = true runner() expect(dummy).toBe(‘value’) obj.prop = ‘World’ expect(dummy).toBe(‘World’) })

it(‘should not be triggered by mutating a property, which is used in an inactive branch’, () => { let dummy const obj = reactive({ prop: ‘value’, run: true })

const conditionalSpy = jest.fn(() => { dummy = obj.run ? obj.prop : ‘other’ }) effect(conditionalSpy)

expect(dummy).toBe(‘value’) expect(conditionalSpy).toHaveBeenCalledTimes(1) obj.run = false expect(dummy).toBe(‘other’) expect(conditionalSpy).toHaveBeenCalledTimes(2) obj.prop = ‘value2’ expect(dummy).toBe(‘other’) expect(conditionalSpy).toHaveBeenCalledTimes(2) })

  2. 24. 每次返回的是一个新函数，原始对象是同一个
  3. ```js
  4. it('should not double wrap if the passed function is a effect', () => {
  5.   const runner = effect(() => {})
  6.   const otherRunner = effect(runner)
  7.   expect(runner).not.toBe(otherRunner)
  8.   expect(runner.raw).toBe(otherRunner.raw)
  9. })

  1. 单一的改变只会执行一次

    1. it('should not run multiple times for a single mutation', () => {
    2. let dummy
    3. const obj = reactive<Record<string, number>>({})
    4. const fnSpy = jest.fn(() => {
    5. for (const key in obj) {
    6.   dummy = obj[key]
    7. }
    8. dummy = obj.prop
    9. })
    10. effect(fnSpy)
    12. expect(fnSpy).toHaveBeenCalledTimes(1)
    13. obj.prop = 16
    14. expect(dummy).toBe(16)
    15. expect(fnSpy).toHaveBeenCalledTimes(2)
    16. })

  2. effect 可以嵌套 

    1. it('should allow nested effects', () => {
    2. const nums = reactive({ num1: 0, num2: 1, num3: 2 })
    3. const dummy: any = {}
    5. const childSpy = jest.fn(() => (dummy.num1 = nums.num1))
    6. const childeffect = effect(childSpy)
    7. const parentSpy = jest.fn(() => {
    8. dummy.num2 = nums.num2
    9. childeffect()
    10. dummy.num3 = nums.num3
    11. })
    12. effect(parentSpy)
    14. expect(dummy).toEqual({ num1: 0, num2: 1, num3: 2 })
    15. expect(parentSpy).toHaveBeenCalledTimes(1)
    16. expect(childSpy).toHaveBeenCalledTimes(2)
    17. // this should only call the childeffect
    18. nums.num1 = 4
    19. expect(dummy).toEqual({ num1: 4, num2: 1, num3: 2 })
    20. expect(parentSpy).toHaveBeenCalledTimes(1)
    21. expect(childSpy).toHaveBeenCalledTimes(3)
    22. // this calls the parenteffect, which calls the childeffect once
    23. nums.num2 = 10
    24. expect(dummy).toEqual({ num1: 4, num2: 10, num3: 2 })
    25. expect(parentSpy).toHaveBeenCalledTimes(2)
    26. expect(childSpy).toHaveBeenCalledTimes(4)
    27. // this calls the parenteffect, which calls the childeffect once
    28. nums.num3 = 7
    29. expect(dummy).toEqual({ num1: 4, num2: 10, num3: 7 })
    30. expect(parentSpy).toHaveBeenCalledTimes(3)
    31. expect(childSpy).toHaveBeenCalledTimes(5)
    32. })

  3. JSON 方法可以响应 

    1. it('should observe json methods', () => {
    2. let dummy = <Record<string, number>>{}
    3. const obj = reactive<Record<string, number>>({})
    4. effect(() => {
    5. dummy = JSON.parse(JSON.stringify(obj))
    6. })
    7. obj.a = 1
    8. expect(dummy.a).toBe(1)
    9. })

  4. Class 方法调用可以观察

    1. it('should observe class method invocations', () => {
    2. class Model {
    3. count: number
    4. constructor() {
    5.   this.count = 0
    6. }
    7. inc() {
    8.   this.count++
    9. }
    10. }
    11. const model = reactive(new Model())
    12. let dummy
    13. effect(() => {
    14. dummy = model.count
    15. })
    16. expect(dummy).toBe(0)
    17. model.inc()
    18. expect(dummy).toBe(1)
    19. })

  5. 传入参数 lazy, 不会立即执行, 支持 lazy 调用 

    1. it('lazy', () => {
    2. const obj = reactive({ foo: 1 })
    3. let dummy
    4. const runner = effect(() => (dummy = obj.foo), { lazy: true })
    5. expect(dummy).toBe(undefined)
    7. expect(runner()).toBe(1)
    8. expect(dummy).toBe(1)
    9. obj.foo = 2
    10. expect(dummy).toBe(2)
    11. })

  6. 传入参数 scheduler, 支持自定义调度

    1. it('scheduler', () => {
    2. let runner: any, dummy
    3. const scheduler = jest.fn(_runner => {
    4. runner = _runner
    5. })
    6. const obj = reactive({ foo: 1 })
    7. effect(
    8. () => {
    9.   dummy = obj.foo
    10. },
    11. { scheduler }
    12. )
    13. expect(scheduler).not.toHaveBeenCalled()
    14. expect(dummy).toBe(1)
    15. // should be called on first trigger
    16. obj.foo++
    17. expect(scheduler).toHaveBeenCalledTimes(1)
    18. // should not run yet
    19. expect(dummy).toBe(1)
    20. // manually run
    21. runner()
    22. // should have run
    23. expect(dummy).toBe(2)
    24. })

  7. observer 的每次响应都会被 track

    1. it('events: onTrack', () => {
    2. let events: DebuggerEvent[] = []
    3. let dummy
    4. const onTrack = jest.fn((e: DebuggerEvent) => {
    5. events.push(e)
    6. })
    7. const obj = reactive({ foo: 1, bar: 2 })
    8. const runner = effect(
    9. () => {
    10.   dummy = obj.foo
    11.   dummy = 'bar' in obj
    12.   dummy = Object.keys(obj)
    13. },
    14. { onTrack }
    15. )
    16. expect(dummy).toEqual(['foo', 'bar'])
    17. expect(onTrack).toHaveBeenCalledTimes(3)
    18. expect(events).toEqual([
    19. {
    20.   effect: runner,
    21.   target: toRaw(obj),
    22.   type: TrackOpTypes.GET,
    23.   key: 'foo'
    24. },
    25. {
    26.   effect: runner,
    27.   target: toRaw(obj),
    28.   type: TrackOpTypes.HAS,
    29.   key: 'bar'
    30. },
    31. {
    32.   effect: runner,
    33.   target: toRaw(obj),
    34.   type: TrackOpTypes.ITERATE,
    35.   key: ITERATE_KEY
    36. }
    37. ])
    38. })

  8. observer 的每次响应会触发 trigger

    1. it('events: onTrigger', () => {
    2. let events: DebuggerEvent[] = []
    3. let dummy
    4. const onTrigger = jest.fn((e: DebuggerEvent) => {
    5. events.push(e)
    6. })
    7. const obj = reactive({ foo: 1 })
    8. const runner = effect(
    9. () => {
    10.   dummy = obj.foo
    11. },
    12. { onTrigger }
    13. )
    15. obj.foo++
    16. expect(dummy).toBe(2)
    17. expect(onTrigger).toHaveBeenCalledTimes(1)
    18. expect(events[0]).toEqual({
    19. effect: runner,
    20. target: toRaw(obj),
    21. type: TriggerOpTypes.SET,
    22. key: 'foo',
    23. oldValue: 1,
    24. newValue: 2
    25. })
    27. delete obj.foo
    28. expect(dummy).toBeUndefined()
    29. expect(onTrigger).toHaveBeenCalledTimes(2)
    30. expect(events[1]).toEqual({
    31. effect: runner,
    32. target: toRaw(obj),
    33. type: TriggerOpTypes.DELETE,
    34. key: 'foo',
    35. oldValue: 2
    36. })
    37. })

  9. observer 支持 stop，stop 后支持手动调用 ```js it(‘stop’, () => { let dummy const obj = reactive({ prop: 1 }) const runner = effect(() => { dummy = obj.prop }) obj.prop = 2 expect(dummy).toBe(2) stop(runner) obj.prop = 3 expect(dummy).toBe(2)

    // stopped effect should still be manually callable runner() expect(dummy).toBe(3) })

it(‘stop: a stopped effect is nested in a normal effect’, () => { let dummy const obj = reactive({ prop: 1 }) const runner = effect(() => { dummy = obj.prop }) stop(runner) obj.prop = 2 expect(dummy).toBe(1)

// observed value in inner stopped effect // will track outer effect as an dependency effect(() => { runner() }) expect(dummy).toBe(2)

// notify outer effect to run obj.prop = 3 expect(dummy).toBe(3) })

  2. 34. `effect` 被 `stop` 后，`scheduler` 不会再响应
  3. ```js
  4. it('stop with scheduler', () => {
  5.   let dummy
  6.   const obj = reactive({ prop: 1 })
  7.   const queue: (() => void)[] = []
  8.   const runner = effect(
  9.     () => {
  10.       dummy = obj.prop
  11.     },
  12.     {
  13.       scheduler: e => queue.push(e)
  14.     }
  15.   )
  16.   obj.prop = 2
  17.   expect(dummy).toBe(1)
  18.   expect(queue.length).toBe(1)
  19.   stop(runner)
  21.   // a scheduled effect should not execute anymore after stopped
  22.   queue.forEach(e => e())
  23.   expect(dummy).toBe(1)
  24. })

  1. 支持 stop 回调

    1. it('events: onStop', () => {
    2. const onStop = jest.fn()
    3. const runner = effect(() => {}, {
    4. onStop
    5. })
    7. stop(runner)
    8. expect(onStop).toHaveBeenCalled()
    9. })

  2. 标记为原始数据的不能响应

    1. it('markRaw', () => {
    2. const obj = reactive({
    3. foo: markRaw({
    4.   prop: 0
    5. })
    6. })
    7. let dummy
    8. effect(() => {
    9. dummy = obj.foo.prop
    10. })
    11. expect(dummy).toBe(0)
    12. obj.foo.prop++
    13. expect(dummy).toBe(0)
    14. obj.foo = { prop: 1 }
    15. expect(dummy).toBe(1)
    16. })

  3. 当新值和旧值都是 NaN 时，不会 trigger

    1. it('should not be trigger when the value and the old value both are NaN', () => {
    2. const obj = reactive({
    3. foo: NaN
    4. })
    5. const fnSpy = jest.fn(() => obj.foo)
    6. effect(fnSpy)
    7. obj.foo = NaN
    8. expect(fnSpy).toHaveBeenCalledTimes(1)
    9. })

  4. 当数组长度设置为0时，会触发所有 effect

    1. it('should trigger all effects when array length is set 0', () => {
    2. const observed: any = reactive([1])
    3. let dummy, record
    4. effect(() => {
    5. dummy = observed.length
    6. })
    7. effect(() => {
    8. record = observed[0]
    9. })
    10. expect(dummy).toBe(1)
    11. expect(record).toBe(1)
    13. observed[1] = 2
    14. expect(observed[1]).toBe(2)
    16. observed.unshift(3)
    17. expect(dummy).toBe(3)
    18. expect(record).toBe(3)
    20. observed.length = 0
    21. expect(dummy).toBe(0)
    22. expect(record).toBeUndefined()
    23. })