Vue3源码学习3-结合vitetest来实现mini-vue

前言

当前已完成的 mini-vue 项目功能模块列表，以及每个模块对应 Vue 3 中的核心功能对照和简要源码说明：

✅ 当前已实现模块汇总（mini-vue）

✅ 每个模块简要源码摘要

1. reactive.ts

import { track, trigger } from './effect'

export function reactive<T extends object>(target: T): T {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key)
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver)
      trigger(target, key)
      return result
    }
  })
}

2. effect.ts

type EffectFn = () => void
interface EffectOptions {
  lazy?: boolean
  scheduler?: () => void
}

let activeEffect: EffectFn | null = null
const targetMap = new WeakMap()

export function effect(fn: EffectFn, options: EffectOptions = {}) {
  const effectFn = () => {
    activeEffect = effectFn
    const result = fn()
    activeEffect = null
    return result
  }

  if (options.scheduler) effectFn.scheduler = options.scheduler
  if (!options.lazy) effectFn()
  return effectFn
}

export function track(target: object, key: string | symbol) { ... }
export function trigger(target: object, key: string | symbol) { ... }

3. computed.ts

export function computed<T>(getter: () => T) {
  let value: T
  let dirty = true

  const runner = effect(getter, {
    lazy: true,
    scheduler: () => {
      dirty = true
      trigger(obj, 'value')
    }
  })

  const obj = {
    get value() {
      track(obj, 'value')
      if (dirty) {
        value = runner()
        dirty = false
      }
      return value
    }
  }

  return obj
}

4. ref.ts

export class RefImpl<T> {
  private _value: T
  constructor(value: T) {
    this._value = value
  }

  get value() {
    track(this, 'value')
    return this._value
  }

  set value(newVal: T) {
    if (newVal !== this._value) {
      this._value = newVal
      trigger(this, 'value')
    }
  }
}

export function ref<T>(value: T) {
  return new RefImpl(value)
}

5. toRef.ts

export function toRef<T extends object, K extends keyof T>(obj: T, key: K) {
  return {
    get value() {
      track(obj, key)
      return obj[key]
    },
    set value(val) {
      obj[key] = val
      trigger(obj, key)
    }
  }
}

6. toRefs.ts

import { toRef } from './toRef'

export function toRefs<T extends object>(obj: T) {
  const result: any = {}
  for (const key in obj) {
    result[key] = toRef(obj, key)
  }
  return result
}

✅ 下一阶段推荐目标

所有核心模块对应的 __tests__ 测试文件，带完整注释

✅ reactive.spec.ts

import { describe, it, expect } from 'vitest'
import { reactive } from '../src/reactive'
import { effect } from '../src/effect'

describe('mini-vue: reactive', () => {
  it('should track and trigger on get/set', () => {
    const obj = reactive({ count: 0 })
    let dummy: number = 0

    effect(() => {
      dummy = obj.count
    })

    expect(dummy).toBe(0)

    // 修改属性 → 触发 trigger → 重新执行 effect
    obj.count++
    expect(dummy).toBe(1)
  })
})

✅ effect.spec.ts

import { describe, it, expect, vi } from 'vitest'
import { reactive } from '../src/reactive'
import { effect } from '../src/effect'

describe('mini-vue: effect', () => {
  it('should re-run effect on dependency change', () => {
    const state = reactive({ num: 1 })
    let dummy

    effect(() => {
      dummy = state.num
    })

    expect(dummy).toBe(1)
    state.num++
    expect(dummy).toBe(2)
  })

  it('should allow scheduler', () => {
    const state = reactive({ foo: 1 })
    const scheduler = vi.fn()
    const runner = effect(() => state.foo, { scheduler })

    // 不会立即运行 effect，而是执行 scheduler
    state.foo++
    expect(scheduler).toHaveBeenCalled()
  })
})

✅ computed.spec.ts

import { describe, it, expect, vi } from 'vitest'
import { reactive } from '../src/reactive'
import { computed } from '../src/computed'
import { effect } from '../src/effect'

describe('mini-vue: computed', () => {
  it('should compute lazily and cache', () => {
    const state = reactive({ count: 1 })
    const getter = vi.fn(() => state.count + 1)
    const c = computed(getter)

    // 没访问前不会调用 getter
    expect(getter).not.toHaveBeenCalled()

    // 第一次访问，计算并缓存
    expect(c.value).toBe(2)
    expect(getter).toHaveBeenCalledTimes(1)

    // 第二次访问，走缓存
    c.value
    expect(getter).toHaveBeenCalledTimes(1)

    // 修改依赖，缓存失效
    state.count++
    expect(c.value).toBe(3)
    expect(getter).toHaveBeenCalledTimes(2)
  })

  it('should work inside effect', () => {
    const state = reactive({ count: 1 })
    const c = computed(() => state.count)

    let dummy
    effect(() => {
      dummy = c.value
    })

    expect(dummy).toBe(1)
    state.count++
    expect(dummy).toBe(2)
  })
})

✅ ref.spec.ts

import { describe, it, expect } from 'vitest'
import { ref } from '../src/ref'
import { effect } from '../src/effect'

describe('mini-vue: ref', () => {
  it('should hold a value', () => {
    const r = ref(1)
    expect(r.value).toBe(1)
  })

  it('should be reactive', () => {
    const r = ref(1)
    let dummy

    effect(() => {
      dummy = r.value
    })

    expect(dummy).toBe(1)
    r.value++
    expect(dummy).toBe(2)
  })

  it('should not trigger if value not changed', () => {
    const r = ref(1)
    let dummy = 0
    let calls = 0

    effect(() => {
      calls++
      dummy = r.value
    })

    expect(calls).toBe(1)
    r.value = 1 // 设置相同值，effect 不应重新执行
    expect(calls).toBe(1)
  })
})

✅ toRefs.spec.ts

import { describe, it, expect } from 'vitest'
import { reactive } from '../src/reactive'
import { toRef } from '../src/toRef'
import { toRefs } from '../src/toRefs'
import { effect } from '../src/effect'

describe('mini-vue: toRef / toRefs', () => {
  it('toRef should convert property to ref', () => {
    const obj = reactive({ count: 1 })
    const countRef = toRef(obj, 'count')

    let dummy
    effect(() => {
      dummy = countRef.value
    })

    expect(dummy).toBe(1)

    obj.count++
    expect(dummy).toBe(2)

    countRef.value = 3
    expect(obj.count).toBe(3)
  })

  it('toRefs should convert all properties to refs', () => {
    const obj = reactive({ count: 1, name: 'vue' })
    const refs = toRefs(obj)

    expect(refs.count.value).toBe(1)
    expect(refs.name.value).toBe('vue')

    refs.count.value++
    expect(obj.count).toBe(2)

    obj.name = 'mini-vue'
    expect(refs.name.value).toBe('mini-vue')
  })
})

✅ 总结：你已支持的模块对应测试