refactor: externalized COMPAT case

Author: LittleSound

packages/runtime-core/src/apiWatch.ts

@@ -39,8 +39,6 @@ import {
 } from './errorHandling'
 import { queuePostRenderEffect } from './renderer'
 import { warn } from './warning'
-import { DeprecationTypes } from './compat/compatConfig'
-import { checkCompatEnabled, isCompatEnabled } from './compat/compatConfig'
 import { ObjectWatchOptionItem } from './componentOptions'
 import { useSSRContext } from '@vue/runtime-core'
 
@@ -268,21 +266,6 @@ function doWatch(
     __DEV__ && warnInvalidSource(source)
   }
 
-  // 2.x array mutation watch compat
-  if (__COMPAT__ && cb && !deep) {
-    const baseGetter = getter
-    getter = () => {
-      const val = baseGetter()
-      if (
-        isArray(val) &&
-        checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
-      ) {
-        traverse(val)
-      }
-      return val
-    }
-  }
-
   if (cb && deep) {
     const baseGetter = getter
     getter = () => traverse(baseGetter())
@@ -334,10 +317,7 @@ function doWatch(
         forceTrigger ||
         (isMultiSource
           ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
-          : hasChanged(newValue, oldValue)) ||
-        (__COMPAT__ &&
-          isArray(newValue) &&
-          isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
+          : hasChanged(newValue, oldValue))
       ) {
         // cleanup before running cb again
         if (cleanup) {

packages/runtime-core/src/componentOptions.ts

@@ -5,7 +5,8 @@ import {
   ComponentInternalOptions,
   Component,
   ConcreteComponent,
-  InternalRenderFunction
+  InternalRenderFunction,
+  currentInstance
 } from './component'
 import {
   isFunction,
@@ -18,13 +19,14 @@ import {
   LooseRequired,
   Prettify
 } from '@vue/shared'
-import { isRef, Ref } from '@vue/reactivity'
+import { getCurrentScope, isRef, Ref } from '@vue/reactivity'
 import { computed } from './apiComputed'
 import {
   watch,
   WatchOptions,
   WatchCallback,
-  createPathGetter
+  createPathGetter,
+  traverse
 } from './apiWatch'
 import { provide, inject } from './apiInject'
 import {
@@ -67,7 +69,7 @@ import { warn } from './warning'
 import { VNodeChild } from './vnode'
 import { callWithAsyncErrorHandling } from './errorHandling'
 import { deepMergeData } from './compat/data'
-import { DeprecationTypes } from './compat/compatConfig'
+import { DeprecationTypes, checkCompatEnabled } from './compat/compatConfig'
 import {
   CompatConfig,
   isCompatEnabled,
@@ -937,18 +939,46 @@ export function createWatcher(
   publicThis: ComponentPublicInstance,
   key: string
 ) {
-  const getter = key.includes('.')
+  let getter = key.includes('.')
     ? createPathGetter(publicThis, key)
     : () => (publicThis as any)[key]
+
+  const options: WatchOptions<false> = {}
+  if (__COMPAT__) {
+    const instance =
+      getCurrentScope() === currentInstance?.scope ? currentInstance : null
+
+    console.log('createWatcher')
+    const newValue = getter()
+    if (
+      isArray(newValue) &&
+      isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
+    ) {
+      options.deep = true
+    }
+
+    const baseGetter = getter
+    getter = () => {
+      const val = baseGetter()
+      if (
+        isArray(val) &&
+        checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
+      ) {
+        traverse(val)
+      }
+      return val
+    }
+  }
+
   if (isString(raw)) {
     const handler = ctx[raw]
     if (isFunction(handler)) {
-      watch(getter, handler as WatchCallback)
+      watch(getter, handler as WatchCallback, options)
     } else if (__DEV__) {
       warn(`Invalid watch handler specified by key "${raw}"`, handler)
     }
   } else if (isFunction(raw)) {
-    watch(getter, raw.bind(publicThis))
+    watch(getter, raw.bind(publicThis), options)
   } else if (isObject(raw)) {
     if (isArray(raw)) {
       raw.forEach(r => createWatcher(r, ctx, publicThis, key))
@@ -957,7 +987,7 @@ export function createWatcher(
         ? raw.handler.bind(publicThis)
         : (ctx[raw.handler] as WatchCallback)
       if (isFunction(handler)) {
-        watch(getter, handler, raw)
+        watch(getter, handler, extend(raw, options))
       } else if (__DEV__) {
         warn(`Invalid watch handler specified by key "${raw.handler}"`, handler)
       }