54-实现 watchEffect

Author: cloudhao1999

README.md

@@ -110,7 +110,7 @@
 
 - [x] 53-实现 monorepo
 
-- [ ] 54-实现 watchEffect
+- [x] 54-实现 watchEffect
 
 ### 课程地址
 

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -0,0 +1,55 @@
+import { reactive } from "@guide-mini-vue/reactivity"
+import { watchEffect } from "../src/apiWatch";
+import { nextTick } from "../src/scheduler";
+import { vi } from "vitest";
+
+
+describe("api: watch", () => {
+    it("effect", async() => {
+        const state = reactive({ count: 0 });
+        let dummy;
+        watchEffect(() => {
+            dummy = state.count;
+        })
+        expect(dummy).toBe(0)
+
+        state.count++
+        await nextTick();
+        expect(dummy).toBe(1)
+    })
+
+    it("stopping the watcher (effetc)", async() => {
+        const state = reactive({ count: 0 });
+        let dummy;
+        const stop: any = watchEffect(() => {
+            dummy = state.count;
+        })
+        expect(dummy).toBe(0)
+
+        stop()
+
+        state.count++
+        await nextTick();
+        // should not be update
+        expect(dummy).toBe(0)
+    })
+
+    it("cleanup registration (effect)", async() => {
+        const state = reactive({ count: 0 });
+        const cleanup = vi.fn();
+        let dummy;
+        const stop: any = watchEffect((onCleanup) => {
+            onCleanup(cleanup)
+            dummy = state.count;
+        })
+        expect(dummy).toBe(0)
+
+        state.count++
+        await nextTick();
+        expect(cleanup).toHaveBeenCalledTimes(1);
+        expect(dummy).toBe(1)
+
+        stop()
+        expect(cleanup).toHaveBeenCalledTimes(2);
+    })
+})

packages/runtime-core/src/apiWatch.ts

@@ -0,0 +1,34 @@
+import { ReactiveEffect } from "../../reactivity/src/effect";
+import { queueFlushCb } from "./scheduler";
+
+
+export function watchEffect(source) {
+
+    function job() {
+        effect.run()
+    }
+
+    let cleanup;
+    const onCleanup = function(fn) {
+        cleanup = effect.onStop = () => {[
+            fn()
+        ]}
+    }
+
+    function getter() {
+        if (cleanup) {
+            cleanup();
+        }
+        source(onCleanup)
+    }
+
+    const effect = new ReactiveEffect(getter, () => {
+        queueFlushCb(job)
+    })
+
+    effect.run()
+
+    return () => {
+        effect.stop()
+    }
+}

packages/runtime-core/src/scheduler.ts

@@ -1,5 +1,6 @@
 
 const queue: any[] = []
+const activePreFlushCbs: any[] = []
 
 let isFlushPending = false
 
@@ -24,10 +25,25 @@ function queueFlush() {
     nextTick(flushJobs)
 }
 
+export function queueFlushCb(job) {
+    activePreFlushCbs.push(job);
+
+    queueFlush()
+}
+
 function flushJobs() {
     isFlushPending = false
+
+    flushPreFlushCbs()
+
     let job;
     while ((job = queue.shift()) !== undefined) {
         job()
     }
-}
+}
+
+function flushPreFlushCbs() {
+    for (let i = 0; i < activePreFlushCbs.length; i++) {
+        activePreFlushCbs[i]()
+    }
+}