Browse Source

fix(transition): optimize prop handling in VaporTransition using Proxy

daiwei 4 months ago
parent
commit
b0926246f1
1 changed files with 10 additions and 20 deletions
  1. 10 20
      packages/runtime-vapor/src/components/Transition.ts

+ 10 - 20
packages/runtime-vapor/src/components/Transition.ts

@@ -80,29 +80,19 @@ export const VaporTransition: FunctionalVaporComponent<TransitionProps> =
     checkTransitionMode(mode)
 
     let resolvedProps: BaseTransitionProps<Element>
-    let isMounted = false
-    renderEffect(() => {
-      resolvedProps = resolveTransitionProps(props)
-      if (isMounted) {
-        // only update props for Fragment transition, for later reusing
-        if (isFragment(children)) {
-          children.$transition!.props = resolvedProps
-        } else {
-          const child = findTransitionBlock(children)
-          if (child) {
-            // replace existing transition hooks
-            child.$transition!.props = resolvedProps
-            applyTransitionHooks(child, child.$transition!, true)
-          }
-        }
-      } else {
-        isMounted = true
-      }
-    })
+    renderEffect(() => (resolvedProps = resolveTransitionProps(props)))
 
     const hooks = applyTransitionHooks(children, {
       state: useTransitionState(),
-      props: resolvedProps!,
+      // use proxy to keep props reference stable
+      props: new Proxy(
+        {},
+        {
+          get(_, key) {
+            return resolvedProps[key as keyof BaseTransitionProps<Element>]
+          },
+        },
+      ),
       instance: instance,
     } as VaporTransitionHooks)