refactor: tweaks

This commit is contained in:
Evan You 2019-11-22 23:32:53 -05:00
parent 1b8236615e
commit a6aa64b0cc
5 changed files with 16 additions and 22 deletions

View File

@ -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

View File

@ -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

View File

@ -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
))

View File

@ -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)

View File

@ -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