---

前言

當前已完成的 mini-vue 項目功能模塊列表，以及每個模塊對應 Vue 3 中的核心功能對照和簡要源碼說明：

---

? 當前已實現模塊匯總（mini-vue）

模塊	文件名	對應 Vue 3 功能	描述
響應式核心	reactive.ts	Vue.reactive	通過 Proxy 實現深層響應式對象追蹤
副作用收集	effect.ts	Vue.effect	依賴自動收集、調度器（scheduler）、懶執行（lazy）
計算屬性	computed.ts	Vue.computed	支持懶計算、緩存、依賴追蹤、調度觸發
基本 Ref	ref.ts	Vue.ref	包裝原始值為響應式對象，追蹤 value 的讀寫操作
對象屬性轉 Ref	toRef.ts	Vue.toRef	將 reactive 對象的某個屬性變為可獨立響應式的 Ref
批量屬性轉 Ref	toRefs.ts	Vue.toRefs	將整個對象的所有屬性都轉為 Ref，支持結構保持響應式

---

? 每個模塊簡要源碼摘要

---

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?: booleanscheduler?: () => void
}let activeEffect: EffectFn | null = null
const targetMap = new WeakMap()export function effect(fn: EffectFn, options: EffectOptions = {}) {const effectFn = () => {activeEffect = effectFnconst result = fn()activeEffect = nullreturn result}if (options.scheduler) effectFn.scheduler = options.schedulerif (!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: Tlet dirty = trueconst runner = effect(getter, {lazy: true,scheduler: () => {dirty = truetrigger(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: Tconstructor(value: T) {this._value = value}get value() {track(this, 'value')return this._value}set value(newVal: T) {if (newVal !== this._value) {this._value = newValtrigger(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] = valtrigger(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
}

---

? 下一階段推薦目標

模塊	Vue 功能	說明
isRef	Vue.isRef()	判斷對象是否為 ref 實例
unref	Vue.unref()	解包 ref 或返回原始值
watch	Vue.watch()	監聽響應式值變化，執行回調
readonly	Vue.readonly()	創建只讀響應式對象，禁止寫入
shallowRef	Vue.shallowRef()	創建淺層響應式對象

---

所有核心模塊對應的 __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 = 0effect(() => {dummy = obj.count})expect(dummy).toBe(0)// 修改屬性 → 觸發 trigger → 重新執行 effectobj.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 dummyeffect(() => {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，而是執行 schedulerstate.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)// 沒訪問前不會調用 getterexpect(getter).not.toHaveBeenCalled()// 第一次訪問，計算并緩存expect(c.value).toBe(2)expect(getter).toHaveBeenCalledTimes(1)// 第二次訪問，走緩存c.valueexpect(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 dummyeffect(() => {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 dummyeffect(() => {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 = 0let calls = 0effect(() => {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 dummyeffect(() => {dummy = countRef.value})expect(dummy).toBe(1)obj.count++expect(dummy).toBe(2)countRef.value = 3expect(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')})
})

---

? 總結：你已支持的模塊對應測試

模塊名	測試文件	已驗證功能
reactive	reactive.spec.ts	get/set 追蹤觸發
effect	effect.spec.ts	基礎響應式綁定、scheduler 調度
computed	computed.spec.ts	懶計算、緩存、響應式依賴更新
ref	ref.spec.ts	value 包裝、響應式觸發、去重
toRef/toRefs	toRefs.spec.ts	屬性映射為 ref、保持響應式聯動

---