feature(apiWatch): 实现watchEffect函数

choukui · Jun 15, 2022 · d04e878 · d04e878
1 parent 74f2b17
commit d04e878
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/runtime-core/__test__/apiWatch.spec.ts b/src/runtime-core/__test__/apiWatch.spec.ts
@@ -1,6 +1,6 @@
 import {
   watch,
-  // watchEffect,
+  watchEffect,
   // reactive,
   // computed,
   // nextTick,
@@ -38,7 +38,7 @@ import { ref } from "../../reactive";
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#watch
 
 describe('api: watch', () => {
-  /*it('effect', async () => {
+  it('effect', async () => {
     const state = reactive({ count: 0 })
     let dummy
     watchEffect(() => {
@@ -49,7 +49,7 @@ describe('api: watch', () => {
     state.count++
     await nextTick()
     expect(dummy).toBe(1)
-  })*/
+  })
 
   it('watching single source: getter', async () => {
     const state = reactive({ count: 0 })

diff --git a/src/runtime-core/apiWatch.ts b/src/runtime-core/apiWatch.ts
@@ -45,6 +45,11 @@ type MapSources<T, Immediate> = {
 type MultiWatchSources = (WatchSource<unknown> | object)[]
 /********** TS类型声明 end ***********/
 
+// watchEffect 实现，和watch的区别是：没有callback函数
+export function watchEffect(effect: WatchEffect, options?: WatchOptionsBase) {
+  doWatch(effect, null, options)
+}
+
 // overload: single source + cb
 export function watch<T, Immediate extends Readonly<boolean> = false>(
   source: WatchSource<T>,
@@ -119,11 +124,14 @@ function doWatch(
       }
     })
   } else if (isFunction(source)) { // function
-    if (cb) {
+    if (cb) { // watch函数
       // @ts-ignore
       getter = () => source()
-    } else {
-      getter = NOOP
+    } else { // 没有callback就是一个watchEffect
+      getter = () => {
+        // @ts-ignore
+        return source()
+      }
     }
   } else {
     getter = NOOP
@@ -133,7 +141,7 @@ function doWatch(
 
   let oldValue = isMultiSource ? [] : {}
   const job: SchedulerJob = () => {
-    if (cb) {
+    if (cb) { // watch(source, callback)
       const newValue = effect.run()
       // 自己提出一个函数，源码里太长了不好阅读，功能一样
       const _hasChange = () => {
@@ -147,6 +155,8 @@ function doWatch(
 
         oldValue = newValue
       }
+    } else { // watchEffect
+      effect.run()
     }
   }
 
@@ -167,6 +177,8 @@ function doWatch(
   if (cb) {
     // 先主动获取下，拿到旧值
     oldValue = effect.run()
+  } else { // watchEffect
+    effect.run()
   }
   return function () {
     //  effect stop