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 = {