fix(runtime-vapor): optimize prop handling in VaporTransitionGroup using Proxy

packages/runtime-vapor/src/components/TransitionGroup.ts

@@ -21,6 +21,7 @@ import {
   type VaporTransitionHooks,
   insert,
 } from '../block'
+import { renderEffect } from '../renderEffect'
 import {
   resolveTransitionHooks,
   setTransitionHooks,
@@ -55,7 +56,18 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
   setup(props: TransitionGroupProps, { slots }) {
     const instance = currentInstance as VaporComponentInstance
     const state = useTransitionState()
-    const cssTransitionProps = resolveTransitionProps(props)
+
+    // use proxy to keep props reference stable
+    let cssTransitionProps = resolveTransitionProps(props)
+    const propsProxy = new Proxy({} as typeof cssTransitionProps, {
+      get(_, key) {
+        return cssTransitionProps[key as keyof typeof cssTransitionProps]
+      },
+    })
+
+    renderEffect(() => {
+      cssTransitionProps = resolveTransitionProps(props)
+    })
 
     let prevChildren: TransitionBlock[]
     let children: TransitionBlock[]
@@ -121,7 +133,7 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
 
     // store props and state on fragment for reusing during insert new items
     setTransitionHooksOnFragment(slottedBlock, {
-      props: cssTransitionProps,
+      props: propsProxy,
       state,
       instance,
     } as VaporTransitionHooks)
@@ -133,7 +145,7 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
         if (child.$key != null) {
           const hooks = resolveTransitionHooks(
             child,
-            cssTransitionProps,
+            propsProxy,
             state,
             instance!,
           )