From 6ed722dbc779251db57b26c08ad4aabe2cd9fcb8 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 21 Aug 2024 14:49:42 +0800
Subject: [PATCH] fix(runtime-core): avoid set ref side effect

---
 .../runtime-core/src/rendererTemplateRef.ts   |  4 +-
 .../vue/__tests__/e2e/TransitionGroup.spec.ts | 52 +++++++++++++++++++
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts
index 647ce1fb42f..47776117397 100644
--- a/packages/runtime-core/src/rendererTemplateRef.ts
+++ b/packages/runtime-core/src/rendererTemplateRef.ts
@@ -11,7 +11,7 @@ import {
 } from '@vue/shared'
 import { isAsyncWrapper } from './apiAsyncComponent'
 import { warn } from './warning'
-import { isRef } from '@vue/reactivity'
+import { isRef, toRaw } from '@vue/reactivity'
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 import type { SchedulerJob } from './scheduler'
 import { queuePostRenderEffect } from './renderer'
@@ -86,7 +86,7 @@ export function setRef(
         if (rawRef.f) {
           const existing = _isString
             ? hasOwn(setupState, ref)
-              ? setupState[ref]
+              ? toRaw(setupState[ref])
               : refs[ref]
             : ref.value
           if (isUnmount) {
diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
index da3f4a42de9..331850725de 100644
--- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
+++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
@@ -630,4 +630,56 @@ describe('e2e: TransitionGroup', () => {
     },
     E2E_TIMEOUT,
   )
+
+  // #7754
+  test(
+    'inner children with ref',
+    async () => {
+      await page().evaluate(() => {
+        const { createApp, ref } = (window as any).Vue
+        createApp({
+          template: `
+              <div id="container">
+                <transition-group name="group">
+                  <div v-for="item in items" :key="item" ref="itemRef" class="test">{{item}}</div>
+                </transition-group>
+              </div>
+              <button id="toggleBtn" @click="click">button</button>
+            `,
+          setup: () => {
+            const items = ref(['a', 'b', 'c'])
+            const click = () => (items.value = ['d', 'b', 'a'])
+            const itemRef = ref()
+            return { click, items, itemRef }
+          },
+        }).mount('#app')
+      })
+      expect(await html('#container')).toBe(
+        `<div class="test">a</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test">c</div>`,
+      )
+
+      expect(await htmlWhenTransitionStart()).toBe(
+        `<div class="test group-enter-from group-enter-active">d</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test group-move" style="">a</div>` +
+          `<div class="test group-leave-from group-leave-active group-move" style="">c</div>`,
+      )
+      await nextFrame()
+      expect(await html('#container')).toBe(
+        `<div class="test group-enter-active group-enter-to">d</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test group-move" style="">a</div>` +
+          `<div class="test group-leave-active group-move group-leave-to" style="">c</div>`,
+      )
+      await transitionFinish(duration * 2)
+      expect(await html('#container')).toBe(
+        `<div class="test">d</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test" style="">a</div>`,
+      )
+    },
+    E2E_TIMEOUT,
+  )
 })