fix(watch): update watch options from lazy to immediate

src/apis/watch.ts

@@ -21,10 +21,16 @@ type MapSources<T> = {
 
 type FlushMode = 'pre' | 'post' | 'sync';
 
-interface WatcherOption {
-  lazy: boolean; // whether or not to delay callcack invoking
-  deep: boolean;
+interface WatchEffectOptions {
   flush: FlushMode;
+  // Not supported options:
+  // onTrack?: (event: DebuggerEvent) => void
+  // onTrigger?: (event: DebuggerEvent) => void
+}
+
+interface WatcherOption extends WatchEffectOptions {
+  immediate: boolean;
+  deep: boolean;
 }
 
 export interface VueWatcher {
@@ -57,7 +63,7 @@ function installWatchEnv(vm: any) {
 function getWatcherOption(options?: Partial<WatcherOption>): WatcherOption {
   return {
     ...{
-      lazy: false,
+      immediate: false,
       deep: false,
       flush: 'post',
     },
@@ -231,12 +237,12 @@ function createWatcher(
     cb(n, o, registerCleanup);
   };
   let callback = createScheduler(applyCb);
-  if (!options.lazy) {
-    const originalCallbck = callback;
+  if (options.immediate) {
+    const originalCallback = callback;
     // `shiftCallback` is used to handle the first sync effect run.
     // The subsequent callbacks will redirect to `callback`.
     let shiftCallback = (n: any, o: any) => {
-      shiftCallback = originalCallbck;
+      shiftCallback = originalCallback;
       applyCb(n, o);
     };
     callback = (n: any, o: any) => {
@@ -246,7 +252,7 @@ function createWatcher(
 
   // @ts-ignore: use undocumented option "sync"
   const stop = vm.$watch(getter, callback, {
-    immediate: !options.lazy,
+    immediate: options.immediate,
     deep: options.deep,
     sync: isSync,
   });
@@ -262,16 +268,17 @@ function createWatcher(
 
 export function watchEffect(
   effect: SimpleEffect,
-  options?: Omit<Partial<WatcherOption>, 'lazy'>
+  options?: Partial<WatchEffectOptions>
 ): StopHandle {
   const opts = getWatcherOption(options);
+  opts.immediate = true;
   const vm = getWatcherVM();
   return createWatcher(vm, effect, null, opts);
 }
 
 export function watch<T = any>(
   source: SimpleEffect,
-  options?: Omit<Partial<WatcherOption>, 'lazy'>
+  options?: Omit<Partial<WatcherOption>, 'immediate'>
 ): StopHandle;
 export function watch<T = any>(
   source: WatcherSource<T>,

test/apis/state.spec.js

@@ -24,9 +24,13 @@ describe('api/ref', () => {
   it('should be reactive', done => {
     const a = ref(1);
     let dummy;
-    watch(a, () => {
-      dummy = a.value;
-    });
+    watch(
+      a,
+      () => {
+        dummy = a.value;
+      },
+      { immediate: true }
+    );
     expect(dummy).toBe(1);
     a.value = 2;
     waitForUpdate(() => {
@@ -44,7 +48,7 @@ describe('api/ref', () => {
       () => {
         dummy = a.value.count;
       },
-      { deep: true }
+      { deep: true, immediate: true }
     );
     expect(dummy).toBe(1);
     a.value.count = 2;
@@ -102,7 +106,8 @@ describe('api/toRefs', () => {
       () => state,
       () => {
         dummy = state.foo;
-      }
+      },
+      { immediate: true }
     );
     const stateAsRefs = toRefs(state);
     expect(dummy).toBe(1);
@@ -128,7 +133,7 @@ describe('api/toRefs', () => {
       bar: 2,
     };
 
-    watch(() => state, spy, { flush: 'sync', lazy: true });
+    watch(() => state, spy, { flush: 'sync' });
     const stateAsRefs = toRefs(state);
 
     expect(stateAsRefs.foo.value).toBe(1);
@@ -155,7 +160,7 @@ describe('unwrapping', () => {
       () => {
         dummy = obj.a;
       },
-      { deep: true, flush: 'sync' }
+      { deep: true, flush: 'sync', immediate: true }
     );
     expect(dummy).toBe(0);
     expect(obj.a).toBe(0);
@@ -220,7 +225,7 @@ describe('unwrapping', () => {
         dummy1 = obj.a;
         dummy2 = obj.b.c;
       },
-      { deep: true, flush: 'sync' }
+      { deep: true, flush: 'sync', immediate: true }
     );
     expect(dummy1).toBe(1);
     expect(dummy2).toBe(1);
@@ -250,7 +255,7 @@ describe('unwrapping', () => {
         dummy1 = obj.a;
         dummy2 = obj.b.c;
       },
-      { deep: true, flush: 'sync' }
+      { deep: true, flush: 'sync', immediate: true }
     );
     expect(dummy1).toBe(1);
     expect(dummy2).toBe(1);
@@ -281,7 +286,7 @@ describe('unwrapping', () => {
       () => {
         dummy = obj.a.foo;
       },
-      { deep: true, flush: 'sync' }
+      { deep: true, flush: 'sync', immediate: true }
     );
     expect(dummy).toBe(undefined);
     set(obj.a, 'foo', count);
@@ -306,7 +311,7 @@ describe('unwrapping', () => {
       () => {
         dummy = obj.a.b;
       },
-      { deep: true, lazy: true, flush: 'sync' }
+      { deep: true, flush: 'sync' }
     );
     expect(dummy).toBeUndefined();
     const replacedRef = ref(2);
@@ -341,7 +346,7 @@ describe('unwrapping', () => {
       () => {
         dummy = state.list[0].count;
       },
-      { lazy: true, flush: 'sync' }
+      { flush: 'sync' }
     );
     expect(dummy).toBeUndefined();
     const a = ref(0);