diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index ebd46ae6d57..312c583ff4a 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -86,7 +86,6 @@ export interface FunctionalComponent< props?: ComponentPropsOptions

emits?: E | (keyof E)[] inheritAttrs?: boolean - inheritRef?: boolean displayName?: string } diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts index 1fb5d3f747a..ee92ef521d0 100644 --- a/packages/runtime-core/src/componentOptions.ts +++ b/packages/runtime-core/src/componentOptions.ts @@ -105,7 +105,6 @@ export interface ComponentOptionsBase< components?: Record directives?: Record inheritAttrs?: boolean - inheritRef?: boolean emits?: E | EE[] // Internal ------------------------------------------------------------------ diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts index c158f4ad863..9b07b3b413b 100644 --- a/packages/runtime-core/src/componentRenderUtils.ts +++ b/packages/runtime-core/src/componentRenderUtils.ts @@ -180,10 +180,6 @@ export function renderComponentRoot( } root.transition = vnode.transition } - // inherit ref - if (Component.inheritRef && vnode.ref != null) { - root.ref = vnode.ref - } if (__DEV__ && setRoot) { setRoot(root) diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index 104fe097710..666b13dc204 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -108,8 +108,6 @@ export function useTransitionState(): TransitionState { const BaseTransitionImpl = { name: `BaseTransition`, - inheritRef: true, - props: { mode: String, appear: Boolean, @@ -135,11 +133,11 @@ const BaseTransitionImpl = { const instance = getCurrentInstance()! const state = useTransitionState() + let prevTransitionKey: any + return () => { - const children = slots.default && getTransitionRawChildren( - slots.default(), - true - ) + const children = + slots.default && getTransitionRawChildren(slots.default(), true) if (!children || !children.length) { return } @@ -183,11 +181,24 @@ const BaseTransitionImpl = { const oldChild = instance.subTree const oldInnerChild = oldChild && getKeepAliveChild(oldChild) + + let transitionKeyChanged = false + const { getTransitionKey } = innerChild.type as any + if (getTransitionKey) { + const key = getTransitionKey() + if (prevTransitionKey === undefined) { + prevTransitionKey = key + } else if (key !== prevTransitionKey) { + prevTransitionKey = key + transitionKeyChanged = true + } + } + // handle mode if ( oldInnerChild && oldInnerChild.type !== Comment && - !isSameVNodeType(innerChild, oldInnerChild) + (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged) ) { const leavingHooks = resolveTransitionHooks( oldInnerChild, diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index 4b6785ea565..4a0830f02f5 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -17,8 +17,7 @@ import { ComponentInternalInstance, createComponentInstance, Data, - setupComponent, - Component + setupComponent } from './component' import { renderComponentRoot, @@ -283,14 +282,10 @@ export const setRef = ( if (!vnode) { value = null } else { - const { el, component, shapeFlag, type } = vnode - if (shapeFlag & ShapeFlags.COMPONENT && (type as Component).inheritRef) { - return - } - if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) { - value = component!.proxy + if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) { + value = vnode.component!.proxy } else { - value = el + value = vnode.el } } diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts index 86c0805f565..2318d19eb9b 100644 --- a/packages/runtime-dom/src/components/Transition.ts +++ b/packages/runtime-dom/src/components/Transition.ts @@ -34,7 +34,6 @@ export const Transition: FunctionalComponent = ( { slots } ) => h(BaseTransition, resolveTransitionProps(props), slots) -Transition.inheritRef = true Transition.displayName = 'Transition' const DOMTransitionPropsValidators = {