fix(compat): watch arrays as deep: 1

Author: skirtles-code

packages/reactivity/src/watch.ts

@@ -245,7 +245,8 @@ export function watch(
         forceTrigger ||
         (isMultiSource
           ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
-          : hasChanged(newValue, oldValue))
+          : hasChanged(newValue, oldValue)) ||
+        (__COMPAT__ && (options as any).compatWatchArray && isArray(newValue))
       ) {
         // cleanup before running cb again
         if (cleanup) {
@@ -264,15 +265,6 @@ export function watch(
                 : oldValue,
             boundCleanup,
           ]
-
-          if (__COMPAT__) {
-            for (let i = 0; i < args.length - 1; i++) {
-              if (args[i] && args[i].WATCH_ARRAY_UNWRAP) {
-                args[i] = args[i].WATCH_ARRAY_UNWRAP
-              }
-            }
-          }
-
           oldValue = newValue
           call
             ? call(cb!, WatchErrorCodes.WATCH_CALLBACK, args)

packages/runtime-core/src/apiWatch.ts

@@ -7,9 +7,17 @@ import {
   type WatchHandle,
   type WatchSource,
   watch as baseWatch,
+  traverse,
 } from '@vue/reactivity'
 import { type SchedulerJob, SchedulerJobFlags, queueJob } from './scheduler'
-import { EMPTY_OBJ, NOOP, extend, isFunction, isString } from '@vue/shared'
+import {
+  EMPTY_OBJ,
+  NOOP,
+  extend,
+  isArray,
+  isFunction,
+  isString,
+} from '@vue/shared'
 import {
   type ComponentInternalInstance,
   currentInstance,
@@ -19,6 +27,11 @@ import {
 import { callWithAsyncErrorHandling } from './errorHandling'
 import { queuePostRenderEffect } from './renderer'
 import { warn } from './warning'
+import {
+  DeprecationTypes,
+  checkCompatEnabled,
+  isCompatEnabled,
+} from './compat/compatConfig'
 import type { ObjectWatchOptionItem } from './componentOptions'
 import { useSSRContext } from './helpers/useSsrContext'
 
@@ -236,6 +249,22 @@ function doWatch(
   return watchHandle
 }
 
+export function createCompatWatchGetter(
+  baseGetter: () => any,
+  instance: ComponentInternalInstance,
+) {
+  return (): any => {
+    const val = baseGetter()
+    if (
+      isArray(val) &&
+      checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
+    ) {
+      traverse(val, 1)
+    }
+    return val
+  }
+}
+
 // this.$watch
 export function instanceWatch(
   this: ComponentInternalInstance,
@@ -244,7 +273,7 @@ export function instanceWatch(
   options?: WatchOptions,
 ): WatchHandle {
   const publicThis = this.proxy as any
-  const getter = isString(source)
+  let getter = isString(source)
     ? source.includes('.')
       ? createPathGetter(publicThis, source)
       : () => publicThis[source]
@@ -256,6 +285,19 @@ export function instanceWatch(
     cb = value.handler as Function
     options = value
   }
+
+  if (
+    __COMPAT__ &&
+    isString(source) &&
+    isCompatEnabled(DeprecationTypes.WATCH_ARRAY, this)
+  ) {
+    const deep = options && options.deep
+    if (!deep) {
+      options = extend({ compatWatchArray: true }, options)
+      getter = createCompatWatchGetter(getter, this)
+    }
+  }
+
   const reset = setCurrentInstance(this)
   const res = doWatch(getter, cb.bind(publicThis), options)
   reset()

packages/runtime-core/src/componentOptions.ts

@@ -1,12 +1,11 @@
-import {
-  type Component,
-  type ComponentInternalInstance,
-  type ComponentInternalOptions,
-  type ConcreteComponent,
-  type Data,
-  type InternalRenderFunction,
-  type SetupContext,
-  currentInstance,
+import type {
+  Component,
+  ComponentInternalInstance,
+  ComponentInternalOptions,
+  ConcreteComponent,
+  Data,
+  InternalRenderFunction,
+  SetupContext,
 } from './component'
 import {
   type LooseRequired,
@@ -19,11 +18,12 @@ import {
   isPromise,
   isString,
 } from '@vue/shared'
-import { type Ref, getCurrentScope, isRef, traverse } from '@vue/reactivity'
+import { type Ref, isRef } from '@vue/reactivity'
 import { computed } from './apiComputed'
 import {
   type WatchCallback,
   type WatchOptions,
+  createCompatWatchGetter,
   createPathGetter,
   watch,
 } from './apiWatch'
@@ -72,9 +72,9 @@ import { warn } from './warning'
 import type { VNodeChild } from './vnode'
 import { callWithAsyncErrorHandling } from './errorHandling'
 import { deepMergeData } from './compat/data'
-import { DeprecationTypes, checkCompatEnabled } from './compat/compatConfig'
 import {
   type CompatConfig,
+  DeprecationTypes,
   isCompatEnabled,
   softAssertCompatEnabled,
 } from './compat/compatConfig'
@@ -843,7 +843,7 @@ function callHook(
   )
 }
 
-export function createWatcher(
+function createWatcher(
   raw: ComponentWatchOptionItem,
   ctx: Data,
   publicThis: ComponentPublicInstance,
@@ -854,23 +854,14 @@ export function createWatcher(
     : () => (publicThis as any)[key]
 
   const options: WatchOptions = {}
-  if (__COMPAT__) {
-    const instance =
-      currentInstance && getCurrentScope() === currentInstance.scope
-        ? currentInstance
-        : null
-
-    const baseGetter = getter
-    getter = () => {
-      const val = baseGetter()
-      if (
-        isArray(val) &&
-        checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
-      ) {
-        traverse(val, 1)
-        return { WATCH_ARRAY_UNWRAP: val }
-      }
-      return val
+  if (
+    __COMPAT__ &&
+    isCompatEnabled(DeprecationTypes.WATCH_ARRAY, publicThis.$)
+  ) {
+    const deep = isObject(raw) && !isArray(raw) && !isFunction(raw) && raw.deep
+    if (!deep) {
+      ;(options as any).compatWatchArray = true
+      getter = createCompatWatchGetter(getter, publicThis.$)
     }
   }