From: Evan You Date: Sat, 23 Nov 2019 04:32:53 +0000 (-0500) Subject: refactor: tweaks X-Git-Tag: v3.0.0-alpha.0~168 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=a6aa64b0cce46c6afe8fdad2485923c04d789489;p=thirdparty%2Fvuejs%2Fcore.git refactor: tweaks --- diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index aace941e3a..a2d668caa3 100644 --- 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 3bf4f6cd53..101d86f7e1 100644 --- 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 | null, initialVNode: VNode, container: HostElement, @@ -419,7 +418,6 @@ function createSuspenseBoundary( 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 e620aaf6d8..0b3465d057 100644 --- 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 258c70ac2c..ec79c1e3c4 100644 --- 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 b5436c159b..ba1d2eb55b 100644 --- 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