fix(watch): fix deep watch for structures containing raw refs

fix #12652
vuejs · Jul 13, 2022 · 1a2c3c2 · 1a2c3c2
1 parent 005e52d
commit 1a2c3c2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/src/core/observer/traverse.ts b/src/core/observer/traverse.ts
@@ -1,6 +1,7 @@
 import { _Set as Set, isObject, isArray } from '../util/index'
 import type { SimpleSet } from '../util/index'
 import VNode from '../vdom/vnode'
+import { isRef } from '../../v3'
 
 const seenObjects = new Set()
 
@@ -35,6 +36,8 @@ function _traverse(val: any, seen: SimpleSet) {
   if (isA) {
     i = val.length
     while (i--) _traverse(val[i], seen)
+  } else if (isRef(val)) {
+    _traverse(val.value, seen)
   } else {
     keys = Object.keys(val)
     i = keys.length

diff --git a/test/unit/features/v3/apiWatch.spec.ts b/test/unit/features/v3/apiWatch.spec.ts
@@ -144,6 +144,20 @@ describe('api: watch', () => {
     expect(dummy).toBe(1)
   })
 
+  it('deep watch w/ raw refs', async () => {
+    const count = ref(0)
+    const src = reactive({
+      arr: [count]
+    })
+    let dummy
+    watch(src, ({ arr: [{ value }] }) => {
+      dummy = value
+    })
+    count.value++
+    await nextTick()
+    expect(dummy).toBe(1)
+  })
+
   it('watching multiple sources', async () => {
     const state = reactive({ count: 1 })
     const count = ref(1)