Repository: vuejs/composition-api
Pull request #757 (2021-07-09 02:56:16)

chore(watchEffect): migrating watchEffect warn and test cases from vue3.


Patch:
diff --git a/src/apis/watch.ts b/src/apis/watch.ts
index a03ba55..6752957 100644
--- a/src/apis/watch.ts
+++ b/src/apis/watch.ts
@@ -103,8 +103,6 @@ function getWatcherOption(options?: Partial<WatchOptions>): WatchOptions {
 function getWatchEffectOption(options?: Partial<WatchOptions>): WatchOptions {
   return {
     ...{
-      immediate: true,
-      deep: false,
       flush: 'pre',
     },
     ...options,
@@ -208,6 +206,21 @@ function createWatcher(
   cb: WatchCallback<any> | null,
   options: WatchOptions
 ): () => void {
+  if (__DEV__ && !cb) {
+    if (options.immediate !== undefined) {
+      warn(
+        `watch() "immediate" option is only respected when using the ` +
+          `watch(source, callback, options?) signature.`
+      )
+    }
+    if (options.deep !== undefined) {
+      warn(
+        `watch() "deep" option is only respected when using the ` +
+          `watch(source, callback, options?) signature.`
+      )
+    }
+  }
+
   const flushMode = options.flush
   const isSync = flushMode === 'sync'
   let cleanup: (() => void) | null
diff --git a/src/mixin.ts b/src/mixin.ts
index 3adde30..8ea9292 100644
--- a/src/mixin.ts
+++ b/src/mixin.ts
@@ -176,7 +176,7 @@ export function mixin(Vue: VueConstructor) {
       return visited.get(target)
     }
     visited.set(target, false)
-    if (Array.isArray(target) && isReactive(target)) {
+    if (isArray(target) && isReactive(target)) {
       visited.set(target, true)
       return true
     }
diff --git a/src/reactivity/del.ts b/src/reactivity/del.ts
index aceb324..a433142 100644
--- a/src/reactivity/del.ts
+++ b/src/reactivity/del.ts
@@ -1,6 +1,12 @@
 import { AnyObject } from '../types/basic'
 import { getVueConstructor } from '../runtimeContext'
-import { hasOwn, isPrimitive, isUndef, isValidArrayIndex } from '../utils'
+import {
+  hasOwn,
+  isPrimitive,
+  isUndef,
+  isArray,
+  isValidArrayIndex,
+} from '../utils'
 
 /**
  * Delete a property and trigger change if necessary.
@@ -14,7 +20,7 @@ export function del(target: AnyObject, key: any) {
       `Cannot delete reactive property on undefined, null, or primitive value: ${target}`
     )
   }
-  if (Array.isArray(target) && isValidArrayIndex(key)) {
+  if (isArray(target) && isValidArrayIndex(key)) {
     target.splice(key, 1)
     return
   }
diff --git a/src/reactivity/reactive.ts b/src/reactivity/reactive.ts
index 90184f8..291a990 100644
--- a/src/reactivity/reactive.ts
+++ b/src/reactivity/reactive.ts
@@ -41,7 +41,7 @@ function setupAccessControl(target: AnyObject): void {
   if (
     !isPlainObject(target) ||
     isRaw(target) ||
-    Array.isArray(target) ||
+    isArray(target) ||
     isRef(target) ||
     isComponentInstance(target) ||
     accessModifiedSet.has(target)


Test patch:
diff --git a/test/apis/watch.spec.js b/test/apis/watch.spec.js
index ab946e1..0bb8aeb 100644
--- a/test/apis/watch.spec.js
+++ b/test/apis/watch.spec.js
@@ -446,6 +446,40 @@ describe('api/watch', () => {
       vm.count++
       expect(spy).toHaveBeenLastCalledWith(1)
     })
+
+    it('warn immediate option when using effect', async () => {
+      const count = ref(0)
+      let dummy
+      watchEffect(
+        () => {
+          dummy = count.value
+        },
+        { immediate: false }
+      )
+      expect(dummy).toBe(0)
+      expect(`"immediate" option is only respected`).toHaveBeenWarned()
+
+      count.value++
+      await nextTick()
+      expect(dummy).toBe(1)
+    })
+
+    it('warn and not respect deep option when using effect', async () => {
+      const arr = ref([1, [2]])
+      const spy = jest.fn()
+      watchEffect(
+        () => {
+          spy()
+          return arr
+        },
+        { deep: true }
+      )
+      expect(spy).toHaveBeenCalledTimes(1)
+      arr.value[1][0] = 3
+      await nextTick()
+      expect(spy).toHaveBeenCalledTimes(1),
+        expect(`"deep" option is only respected`).toHaveBeenWarned()
+    })
   })
 
   describe('Multiple sources', () => {