refactor: tweaks

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index aace941e3a7fb15ec74bf96b05c9daaa002b2f10..a2d668caa38b1659c113b123a454dfcd9db46b84 100644 (file)
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -28,6 +28,7 @@ import {
 } from '@vue/shared'
 import { SuspenseBoundary } from './components/Suspense'
 import { CompilerError, CompilerOptions } from '@vue/compiler-core'
+import { currentRenderingInstance } from './componentRenderUtils'
 
 export type Data = { [key: string]: unknown }
 
@@ -112,6 +113,7 @@ export interface ComponentInternalInstance {
   sink: { [key: string]: any }
 
   // lifecycle
+  isMounted: boolean
   isUnmounted: boolean
   isDeactivated: boolean
   [LifecycleHooks.BEFORE_CREATE]: LifecycleHook
@@ -179,6 +181,7 @@ export function createComponentInstance(
 
     // lifecycle hooks
     // not using enums here because it results in computed properties
+    isMounted: false,
     isUnmounted: false,
     isDeactivated: false,
     bc: null,
@@ -217,7 +220,7 @@ export let currentInstance: ComponentInternalInstance | null = null
 export let currentSuspense: SuspenseBoundary | null = null
 
 export const getCurrentInstance: () => ComponentInternalInstance | null = () =>
-  currentInstance
+  currentInstance || currentRenderingInstance
 
 export const setCurrentInstance = (
   instance: ComponentInternalInstance | null

diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index 3bf4f6cd53d96e7a7e00023edc90fea36f117a62..101d86f7e1ae65f996a83ccf8affdb5685e5507e 100644 (file)
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -219,7 +219,6 @@ export interface SuspenseBoundary<
     instance: ComponentInternalInstance,
     setupRenderEffect: (
       instance: ComponentInternalInstance,
-      parentComponent: ComponentInternalInstance | null,
       parentSuspense: SuspenseBoundary<HostNode, HostElement> | null,
       initialVNode: VNode<HostNode, HostElement>,
       container: HostElement,
@@ -419,7 +418,6 @@ function createSuspenseBoundary<HostNode, HostElement>(
           handleSetupResult(instance, asyncSetupResult, suspense)
           setupRenderEffect(
             instance,
-            parentComponent,
             suspense,
             vnode,
             // component may have been moved before resolve

diff --git a/packages/runtime-core/src/components/Transition.ts b/packages/runtime-core/src/components/Transition.ts
index e620aaf6d8740f9a8dbf42376e7231a5d43e1af0..0b3465d057a3be5a201ea1cc9f5c53fd7efb9bea 100644 (file)
--- a/packages/runtime-core/src/components/Transition.ts
+++ b/packages/runtime-core/src/components/Transition.ts
@@ -7,22 +7,23 @@ import { cloneVNode, Comment, isSameVNodeType, VNode } from '../vnode'
 import { warn } from '../warning'
 import { isKeepAlive } from './KeepAlive'
 import { toRaw } from '@vue/reactivity'
-import { onMounted } from '../apiLifecycle'
 import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling'
 import { ShapeFlags } from '../shapeFlags'
 
-// Using camel case here makes it easier to use in render functions & JSX.
-// In templates these will be written as @before-enter="xxx"
-// The compiler has special handling to convert them into the proper cases.
 export interface TransitionProps {
   mode?: 'in-out' | 'out-in' | 'default'
   appear?: boolean
+
   // If true, indicates this is a transition that doesn't actually insert/remove
   // the element, but toggles the show / hidden status instead.
   // The transition hooks are injected, but will be skipped by the renderer.
   // Instead, a custom directive can control the transition by calling the
   // injected hooks (e.g. v-show).
   persisted?: boolean
+
+  // Hooks. Using camel casef for easier usage in render functions & JSX.
+  // In templates these will be written as @before-enter="xxx"
+  // The compiler has special handling to convert them into the proper cases.
   // enter
   onBeforeEnter?: (el: any) => void
   onEnter?: (el: any, done: () => void) => void
@@ -49,13 +50,8 @@ const TransitionImpl = {
   name: `BaseTransition`,
   setup(props: TransitionProps, { slots }: SetupContext) {
     const instance = getCurrentInstance()!
-    let isLeaving = false
-    let isMounted = false
     const pendingCallbacks: PendingCallbacks = {}
-
-    onMounted(() => {
-      isMounted = true
-    })
+    let isLeaving = false
 
     const callTransitionHook: TransitionHookCaller = (hook, args) => {
       hook &&
@@ -101,7 +97,7 @@ const TransitionImpl = {
       const transitionHooks = (child.transition = resolveTransitionHooks(
         rawProps,
         callTransitionHook,
-        isMounted,
+        instance.isMounted,
         pendingCallbacks,
         performDelayedLeave
       ))

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 258c70ac2c94909aaf70573c2c3865e82819b474..ec79c1e3c409efcfc39169dcd5e5fccea98a5b2f 100644 (file)
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -885,7 +885,6 @@ export function createRenderer<
 
     setupRenderEffect(
       instance,
-      parentComponent,
       parentSuspense,
       initialVNode,
       container,
@@ -900,7 +899,6 @@ export function createRenderer<
 
   function setupRenderEffect(
     instance: ComponentInternalInstance,
-    parentComponent: ComponentInternalInstance | null,
     parentSuspense: HostSuspenseBoundary | null,
     initialVNode: HostVNode,
     container: HostElement,
@@ -908,9 +906,8 @@ export function createRenderer<
     isSVG: boolean
   ) {
     // create reactive effect for rendering
-    let mounted = false
     instance.update = effect(function componentEffect() {
-      if (!mounted) {
+      if (!instance.isMounted) {
         const subTree = (instance.subTree = renderComponentRoot(instance))
         // beforeMount hook
         if (instance.bm !== null) {
@@ -929,7 +926,7 @@ export function createRenderer<
         ) {
           queuePostRenderEffect(instance.a, parentSuspense)
         }
-        mounted = true
+        instance.isMounted = true
       } else {
         // updateComponent
         // This is triggered by mutation of component's own state (next: null)

diff --git a/packages/runtime-dom/src/components/CSSTransition.ts b/packages/runtime-dom/src/components/CSSTransition.ts
index b5436c159b38c50f00d655e3cca3ba90d68250ef..ba1d2eb55b708f9ad3da3cc7907c6731602f71e4 100644 (file)
--- a/packages/runtime-dom/src/components/CSSTransition.ts
+++ b/packages/runtime-dom/src/components/CSSTransition.ts
@@ -3,10 +3,10 @@ import {
   TransitionProps,
   h,
   warn,
-  FunctionalComponent
+  FunctionalComponent,
+  getCurrentInstance
 } from '@vue/runtime-core'
 import { isObject } from '@vue/shared'
-import { currentRenderingInstance } from 'packages/runtime-core/src/componentRenderUtils'
 
 const TRANSITION = 'transition'
 const ANIMATION = 'animation'
@@ -71,7 +71,7 @@ function resolveCSSTransitionProps({
   const { appear, onBeforeEnter, onEnter, onLeave } = baseProps
 
   // is appearing
-  if (appear && !currentRenderingInstance!.subTree) {
+  if (appear && !getCurrentInstance()!.isMounted) {
     enterFromClass = appearFromClass
     enterActiveClass = appearActiveClass
     enterToClass = appearToClass