fix(watch): fix cleaup callback not running when watcher stops

Resolves: #113

Author: liximomo

src/apis/watch.ts

@@ -91,7 +91,7 @@ function createWatcher(
   options: WatcherOption
 ): () => void {
   const flushMode = options.flush;
-  let cleanup: () => void;
+  let cleanup: (() => void) | null;
   const registerCleanup: CleanupRegistrator = (fn: () => void) => {
     cleanup = () => {
       try {
@@ -106,7 +106,7 @@ function createWatcher(
   if (cb === null) {
     const getter = () => (source as SimpleEffect)(registerCleanup);
     // cleanup before running getter again
-    const runBefore = () => {
+    const runCleanup = () => {
       if (cleanup) {
         cleanup();
       }
@@ -118,7 +118,7 @@ function createWatcher(
         deep: options.deep,
         // @ts-ignore
         sync: true,
-        before: runBefore,
+        before: runCleanup,
       });
     }
 
@@ -131,7 +131,7 @@ function createWatcher(
         immediate: false,
         deep: options.deep,
         // @ts-ignore
-        before: runBefore,
+        before: runCleanup,
       });
     };
 
@@ -144,7 +144,11 @@ function createWatcher(
 
     return () => {
       hasEnded = true;
-      stopRef && stopRef();
+      if (stopRef) {
+        stopRef();
+        runCleanup();
+        cleanup = null;
+      }
     };
   }
 
@@ -187,12 +191,20 @@ function createWatcher(
     applyCb(n, o);
   };
 
-  return vm.$watch(getter, options.lazy ? callback : shiftCallback, {
+  const stop = vm.$watch(getter, options.lazy ? callback : shiftCallback, {
     immediate: !options.lazy,
     deep: options.deep,
     // @ts-ignore
     sync: flushMode === 'sync',
   });
+
+  return () => {
+    stop();
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+  };
 }
 
 export function watch<T = any>(

test/apis/watch.spec.js

@@ -513,7 +513,7 @@ describe('api/watch', () => {
       return p;
     }
 
-    it('work with a single getter', done => {
+    it('work with (single getter)', done => {
       const id = ref(1);
       const promises = [];
       watch(onCleanup => {
@@ -534,6 +534,37 @@ describe('api/watch', () => {
         .then(done);
     });
 
+    it('run cleanup when watch stops (single getter)', done => {
+      const spy = jest.fn();
+      const cleanup = jest.fn();
+      const stop = watch(onCleanup => {
+        spy();
+        onCleanup(cleanup);
+      });
+      waitForUpdate(() => {
+        expect(spy).toHaveBeenCalled();
+        stop();
+      })
+        .then(() => {
+          expect(cleanup).toHaveBeenCalled();
+        })
+        .then(done);
+    });
+
+    it('run cleanup when watch stops', () => {
+      const id = ref(1);
+      const spy = jest.fn();
+      const cleanup = jest.fn();
+      const stop = watch(id, (value, oldValue, onCleanup) => {
+        spy(value);
+        onCleanup(cleanup);
+      });
+
+      expect(spy).toHaveBeenCalledWith(1);
+      stop();
+      expect(cleanup).toHaveBeenCalled();
+    });
+
     it('should not collect reactive in onCleanup', done => {
       const ref1 = ref(1);
       const ref2 = ref(1);