From 68254f31d51863f07719b0ffb0e1b2fc82a7943f Mon Sep 17 00:00:00 2001
From: NoTwoBoy <1244476905@qq.com>
Date: Mon, 18 Nov 2024 19:08:37 +0800
Subject: [PATCH 1/3] fix(reactivity): `triggerRef` fails when target is an
 array

---
 packages/reactivity/src/dep.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/reactivity/src/dep.ts b/packages/reactivity/src/dep.ts
index 196c2aaf9..a44081a72 100644
--- a/packages/reactivity/src/dep.ts
+++ b/packages/reactivity/src/dep.ts
@@ -387,5 +387,7 @@ export function getDepFromReactive(
   key: string | number | symbol,
 ): Dep | undefined {
   const depMap = targetMap.get(object)
+  // #12427, while the target object is an array, the dep key(array index) must be string
+  if (isArray(object) && typeof key === 'number') key = key.toString()
   return depMap && depMap.get(key)
 }

From 375b0b3730c9ce9c468d3ce915382a4eb08fddbf Mon Sep 17 00:00:00 2001
From: NoTwoBoy <1244476905@qq.com>
Date: Mon, 18 Nov 2024 19:32:45 +0800
Subject: [PATCH 2/3] chore: add test

---
 packages/reactivity/__tests__/reactiveArray.spec.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/reactivity/__tests__/reactiveArray.spec.ts b/packages/reactivity/__tests__/reactiveArray.spec.ts
index a1154cfa2..34be98668 100644
--- a/packages/reactivity/__tests__/reactiveArray.spec.ts
+++ b/packages/reactivity/__tests__/reactiveArray.spec.ts
@@ -2,6 +2,7 @@ import { type ComputedRef, computed } from '../src/computed'
 import { isReactive, reactive, shallowReactive, toRaw } from '../src/reactive'
 import { isRef, ref } from '../src/ref'
 import { effect } from '../src/effect'
+import { getDepFromReactive } from '../src/dep'
 
 describe('reactivity/reactive/Array', () => {
   test('should make Array reactive', () => {
@@ -279,6 +280,13 @@ describe('reactivity/reactive/Array', () => {
     expect(proxy).toHaveLength(1)
   })
 
+  // #12427
+  test('get reactive array dep', () => {
+    const array = reactive<number[]>([1])
+    effect(() => array[0])
+    expect(getDepFromReactive(toRaw(array), 0)).toBeDefined()
+  })
+
   describe('Array methods w/ refs', () => {
     let original: any[]
     beforeEach(() => {

From eccd16e68e1e2f5088644d6a69d6142bb0ced000 Mon Sep 17 00:00:00 2001
From: NoTwoBoy <1244476905@qq.com>
Date: Tue, 19 Nov 2024 11:39:19 +0800
Subject: [PATCH 3/3] chore: update test

---
 packages/reactivity/__tests__/reactiveArray.spec.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/reactivity/__tests__/reactiveArray.spec.ts b/packages/reactivity/__tests__/reactiveArray.spec.ts
index 34be98668..981d971a7 100644
--- a/packages/reactivity/__tests__/reactiveArray.spec.ts
+++ b/packages/reactivity/__tests__/reactiveArray.spec.ts
@@ -1,8 +1,7 @@
 import { type ComputedRef, computed } from '../src/computed'
 import { isReactive, reactive, shallowReactive, toRaw } from '../src/reactive'
-import { isRef, ref } from '../src/ref'
+import { isRef, ref, toRef, triggerRef } from '../src/ref'
 import { effect } from '../src/effect'
-import { getDepFromReactive } from '../src/dep'
 
 describe('reactivity/reactive/Array', () => {
   test('should make Array reactive', () => {
@@ -281,10 +280,14 @@ describe('reactivity/reactive/Array', () => {
   })
 
   // #12427
-  test('get reactive array dep', () => {
+  test('trigger the ref that is created by toRef from a reactive Array', () => {
     const array = reactive<number[]>([1])
-    effect(() => array[0])
-    expect(getDepFromReactive(toRaw(array), 0)).toBeDefined()
+    const first = toRef(array, 0)
+    const fn = vi.fn()
+    effect(() => fn(first.value))
+    expect(fn).toHaveBeenCalledTimes(1)
+    triggerRef(first)
+    expect(fn).toHaveBeenCalledTimes(2)
   })
 
   describe('Array methods w/ refs', () => {