Просмотр исходного кода

refactor: remove manual `TransitionGroup` update triggering and the `group` flag from transition hooks.

daiwei 6 месяцев назад
Родитель
Сommit
59a62d5528

+ 0 - 7
packages/runtime-vapor/src/apiCreateFor.ts

@@ -39,7 +39,6 @@ import {
   isLastInsertion,
   resetInsertionState,
 } from './insertionState'
-import { triggerTransitionGroupUpdate } from './components/TransitionGroup'
 
 class ForBlock extends VaporFragment {
   scope: EffectScope | undefined
@@ -131,12 +130,6 @@ export const createFor = (
     newBlocks = new Array(newLength)
     let isFallback = false
 
-    // trigger TransitionGroup update hooks
-    const transitionHooks = frag.$transition
-    if (transitionHooks && transitionHooks.group && isMounted) {
-      triggerTransitionGroupUpdate(transitionHooks)
-    }
-
     const prevSub = setActiveSub()
 
     if (!isMounted) {

+ 0 - 2
packages/runtime-vapor/src/block.ts

@@ -28,8 +28,6 @@ export interface VaporTransitionHooks extends TransitionHooks {
   instance: VaporComponentInstance
   // mark transition hooks as disabled
   disabled?: boolean
-  // indicates a group transition
-  group?: boolean
 }
 
 export interface TransitionOptions {

+ 1 - 2
packages/runtime-vapor/src/components/Transition.ts

@@ -208,7 +208,7 @@ export function applyTransitionHooks(
     return hooks
   }
 
-  const { props, instance, state, delayedLeave, group } = hooks
+  const { props, instance, state, delayedLeave } = hooks
   let resolvedHooks = resolveTransitionHooks(
     child,
     props,
@@ -217,7 +217,6 @@ export function applyTransitionHooks(
     hooks => (resolvedHooks = hooks as VaporTransitionHooks),
   )
   resolvedHooks.delayedLeave = delayedLeave
-  resolvedHooks.group = group
   child.$transition = resolvedHooks
   if (isFrag) setTransitionHooksOnFragment(block, resolvedHooks)
 

+ 1 - 24
packages/runtime-vapor/src/components/TransitionGroup.ts

@@ -10,12 +10,11 @@ import {
   hasCSSTransform,
   onBeforeUpdate,
   onUpdated,
-  queuePostFlushCb,
   resolveTransitionProps,
   useTransitionState,
   warn,
 } from '@vue/runtime-dom'
-import { extend, invokeArrayFns, isArray } from '@vue/shared'
+import { extend, isArray } from '@vue/shared'
 import {
   type Block,
   type TransitionBlock,
@@ -125,7 +124,6 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
       props: cssTransitionProps,
       state,
       instance,
-      group: true,
     } as VaporTransitionHooks)
 
     children = getTransitionBlocks(slottedBlock)
@@ -139,7 +137,6 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
             state,
             instance!,
           )
-          hooks.group = true
           setTransitionHooks(child, hooks)
         } else if (__DEV__) {
           warn(`<transition-group> children must be keyed`)
@@ -216,23 +213,3 @@ function getFirstConnectedChild(
     if (el.isConnected) return el
   }
 }
-
-/**
- * The implementation of TransitionGroup relies on the onBeforeUpdate and onUpdated hooks.
- * However, when the slot content of TransitionGroup updates, it does not trigger the
- * onBeforeUpdate and onUpdated hooks. Therefore, it is necessary to manually trigger
- * the TransitionGroup update hooks to ensure its proper work.
- */
-export function triggerTransitionGroupUpdate(
-  transition: VaporTransitionHooks,
-): void {
-  const { instance } = transition
-  if (!instance.isUpdating) {
-    instance.isUpdating = true
-    if (instance.bu) invokeArrayFns(instance.bu)
-    queuePostFlushCb(() => {
-      instance.isUpdating = false
-      if (instance.u) invokeArrayFns(instance.u)
-    })
-  }
-}