theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(createComponent): rename to defineComponent (#549)

Browse Source
This commit is contained in:
Chris Fritz 2019-12-22 10:58:12 -05:00 committed by Evan You
parent 7d2ae08277
commit 1c4cdd841d
18 changed files with 74 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/runtime-core/__tests__/apiOptions.spec.ts
View File

@ -8,13 +8,13 @@ import {
nextTick, nextTick,
renderToString, renderToString,
ref, ref,
createComponent, defineComponent,
mockWarn mockWarn
} from '@vue/runtime-test' } from '@vue/runtime-test'
describe('api: options', () => { describe('api: options', () => {
test('data', async () => { test('data', async () => {
const Comp = createComponent({ const Comp = defineComponent({
data() { data() {
return { return {
foo: 1 foo: 1
@ -42,7 +42,7 @@ describe('api: options', () => {
}) })
test('computed', async () => { test('computed', async () => {
const Comp = createComponent({ const Comp = defineComponent({
data() { data() {
return { return {
foo: 1 foo: 1
@ -78,7 +78,7 @@ describe('api: options', () => {
}) })
test('methods', async () => { test('methods', async () => {
const Comp = createComponent({ const Comp = defineComponent({
data() { data() {
return { return {
foo: 1 foo: 1
@ -536,7 +536,7 @@ describe('api: options', () => {
}) })
test('accessing setup() state from options', async () => { test('accessing setup() state from options', async () => {
const Comp = createComponent({ const Comp = defineComponent({
setup() { setup() {
return { return {
count: ref(0) count: ref(0)

10
packages/runtime-core/__tests__/apiSetupContext.spec.ts
View File

@ -7,7 +7,7 @@ import {
serializeInner, serializeInner,
nextTick, nextTick,
watch, watch,
createComponent, defineComponent,
triggerEvent, triggerEvent,
TestElement TestElement
} from '@vue/runtime-test' } from '@vue/runtime-test'
@ -16,7 +16,7 @@ import {
describe('api: setup context', () => { describe('api: setup context', () => {
it('should expose return values to template render context', () => { it('should expose return values to template render context', () => {
const Comp = createComponent({ const Comp = defineComponent({
setup() { setup() {
return { return {
// ref should auto-unwrap // ref should auto-unwrap
@ -53,7 +53,7 @@ describe('api: setup context', () => {
render: () => h(Child, { count: count.value }) render: () => h(Child, { count: count.value })
} }
const Child = createComponent({ const Child = defineComponent({
setup(props: { count: number }) { setup(props: { count: number }) {
watch(() => { watch(() => {
dummy = props.count dummy = props.count
@ -82,7 +82,7 @@ describe('api: setup context', () => {
render: () => h(Child, { count: count.value }) render: () => h(Child, { count: count.value })
} }
const Child = createComponent({ const Child = defineComponent({
props: { props: {
count: Number count: Number
}, },
@ -177,7 +177,7 @@ describe('api: setup context', () => {
}) })
} }
const Child = createComponent({ const Child = defineComponent({
props: { props: {
count: { count: {
type: Number, type: Number,

8
packages/runtime-core/__tests__/apiTemplateRef.spec.ts
View File

@ -5,7 +5,7 @@ import {
render, render,
nextTick, nextTick,
Ref, Ref,
createComponent defineComponent
} from '@vue/runtime-test' } from '@vue/runtime-test'
// reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs // reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs
@ -83,7 +83,7 @@ describe('api: template refs', () => {
const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
const fn = jest.fn() const fn = jest.fn()
const Comp = createComponent(() => () => h('div', { ref: fn })) const Comp = defineComponent(() => () => h('div', { ref: fn }))
render(h(Comp), root) render(h(Comp), root)
expect(fn.mock.calls[0][0]).toBe(root.children[0]) expect(fn.mock.calls[0][0]).toBe(root.children[0])
}) })
@ -94,7 +94,7 @@ describe('api: template refs', () => {
const fn2 = jest.fn() const fn2 = jest.fn()
const fn = ref(fn1) const fn = ref(fn1)
const Comp = createComponent(() => () => h('div', { ref: fn.value })) const Comp = defineComponent(() => () => h('div', { ref: fn.value }))
render(h(Comp), root) render(h(Comp), root)
expect(fn1.mock.calls).toHaveLength(1) expect(fn1.mock.calls).toHaveLength(1)
@ -113,7 +113,7 @@ describe('api: template refs', () => {
const fn = jest.fn() const fn = jest.fn()
const toggle = ref(true) const toggle = ref(true)
const Comp = createComponent(() => () => const Comp = defineComponent(() => () =>
toggle.value ? h('div', { ref: fn }) : null toggle.value ? h('div', { ref: fn }) : null
) )
render(h(Comp), root) render(h(Comp), root)

4
packages/runtime-core/__tests__/errorHandling.spec.ts
View File

@ -8,7 +8,7 @@ import {
ref, ref,
nextTick, nextTick,
mockWarn, mockWarn,
createComponent defineComponent
} from '@vue/runtime-test' } from '@vue/runtime-test'
import { setErrorRecovery } from '../src/errorHandling' import { setErrorRecovery } from '../src/errorHandling'
@ -235,7 +235,7 @@ describe('error handling', () => {
} }
} }
const Child = createComponent(() => () => h('div', { ref })) const Child = defineComponent(() => () => h('div', { ref }))
render(h(Comp), nodeOps.createElement('div')) render(h(Comp), nodeOps.createElement('div'))
expect(fn).toHaveBeenCalledWith(err, 'ref function') expect(fn).toHaveBeenCalledWith(err, 'ref function')

14
packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
View File

@ -6,7 +6,7 @@ import {
mergeProps, mergeProps,
ref, ref,
onUpdated, onUpdated,
createComponent defineComponent
} from '@vue/runtime-dom' } from '@vue/runtime-dom'
import { mockWarn } from '@vue/runtime-test' import { mockWarn } from '@vue/runtime-test'
@ -102,7 +102,7 @@ describe('attribute fallthrough', () => {
} }
} }
const Child = createComponent({ const Child = defineComponent({
props: { props: {
foo: Number foo: Number
}, },
@ -179,7 +179,7 @@ describe('attribute fallthrough', () => {
} }
} }
const GrandChild = createComponent({ const GrandChild = defineComponent({
props: { props: {
foo: Number foo: Number
}, },
@ -232,7 +232,7 @@ describe('attribute fallthrough', () => {
} }
} }
const Child = createComponent({ const Child = defineComponent({
props: ['foo'], props: ['foo'],
inheritAttrs: false, inheritAttrs: false,
render() { render() {
@ -255,7 +255,7 @@ describe('attribute fallthrough', () => {
} }
} }
const Child = createComponent({ const Child = defineComponent({
props: ['foo'], props: ['foo'],
inheritAttrs: false, inheritAttrs: false,
render() { render() {
@ -287,7 +287,7 @@ describe('attribute fallthrough', () => {
} }
} }
const Child = createComponent({ const Child = defineComponent({
props: ['foo'], props: ['foo'],
render() { render() {
return [h('div'), h('div')] return [h('div'), h('div')]
@ -308,7 +308,7 @@ describe('attribute fallthrough', () => {
} }
} }
const Child = createComponent({ const Child = defineComponent({
props: ['foo'], props: ['foo'],
render() { render() {
return [h('div'), h('div', this.$attrs)] return [h('div'), h('div', this.$attrs)]

8
packages/runtime-core/__tests__/rendererPortal.spec.ts
View File

@ -3,7 +3,7 @@ import {
serializeInner, serializeInner,
render, render,
h, h,
createComponent, defineComponent,
Portal, Portal,
Text, Text,
Fragment, Fragment,
@ -19,7 +19,7 @@ describe('renderer: portal', () => {
const target = nodeOps.createElement('div') const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
const Comp = createComponent(() => () => const Comp = defineComponent(() => () =>
h(Fragment, [ h(Fragment, [
h(Portal, { target }, h('div', 'teleported')), h(Portal, { target }, h('div', 'teleported')),
h('div', 'root') h('div', 'root')
@ -37,7 +37,7 @@ describe('renderer: portal', () => {
const target = ref(targetA) const target = ref(targetA)
const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
const Comp = createComponent(() => () => const Comp = defineComponent(() => () =>
h(Fragment, [ h(Fragment, [
h(Portal, { target: target.value }, h('div', 'teleported')), h(Portal, { target: target.value }, h('div', 'teleported')),
h('div', 'root') h('div', 'root')
@ -64,7 +64,7 @@ describe('renderer: portal', () => {
h('div', 'teleported') h('div', 'teleported')
]) ])
const Comp = createComponent(() => () => const Comp = defineComponent(() => () =>
h(Portal, { target }, children.value) h(Portal, { target }, children.value)
) )
render(h(Comp), root) render(h(Comp), root)

12
packages/runtime-core/src/apiCreateComponent.ts → packages/runtime-core/src/apiDefineComponent.ts
View File

@ -11,14 +11,14 @@ import { ExtractPropTypes, ComponentPropsOptions } from './componentProps'
import { isFunction } from '@vue/shared' import { isFunction } from '@vue/shared'
import { VNodeProps } from './vnode' import { VNodeProps } from './vnode'
// createComponent is a utility that is primarily used for type inference // defineComponent is a utility that is primarily used for type inference
// when declaring components. Type inference is provided in the component // when declaring components. Type inference is provided in the component
// options (provided as the argument). The returned value has artifical types // options (provided as the argument). The returned value has artifical types
// for TSX / manual render function / IDE support. // for TSX / manual render function / IDE support.
// overload 1: direct setup function // overload 1: direct setup function
// (uses user defined props interface) // (uses user defined props interface)
export function createComponent<Props, RawBindings = object>( export function defineComponent<Props, RawBindings = object>(
setup: ( setup: (
props: Readonly<Props>, props: Readonly<Props>,
ctx: SetupContext ctx: SetupContext
@ -38,7 +38,7 @@ export function createComponent<Props, RawBindings = object>(
// overload 2: object format with no props // overload 2: object format with no props
// (uses user defined props interface) // (uses user defined props interface)
// return type is for Vetur and TSX support // return type is for Vetur and TSX support
export function createComponent< export function defineComponent<
Props, Props,
RawBindings, RawBindings,
D, D,
@ -60,7 +60,7 @@ export function createComponent<
// overload 3: object format with array props declaration // overload 3: object format with array props declaration
// props inferred as { [key in PropNames]?: any } // props inferred as { [key in PropNames]?: any }
// return type is for Vetur and TSX support // return type is for Vetur and TSX support
export function createComponent< export function defineComponent<
PropNames extends string, PropNames extends string,
RawBindings, RawBindings,
D, D,
@ -75,7 +75,7 @@ export function createComponent<
// overload 4: object format with object props declaration // overload 4: object format with object props declaration
// see `ExtractPropTypes` in ./componentProps.ts // see `ExtractPropTypes` in ./componentProps.ts
export function createComponent< export function defineComponent<
// the Readonly constraint allows TS to treat the type of { required: true } // the Readonly constraint allows TS to treat the type of { required: true }
// as constant instead of boolean. // as constant instead of boolean.
PropsOptions extends Readonly<ComponentPropsOptions>, PropsOptions extends Readonly<ComponentPropsOptions>,
@ -97,6 +97,6 @@ export function createComponent<
} }
// implementation, close to no-op // implementation, close to no-op
export function createComponent(options: unknown) { export function defineComponent(options: unknown) {
return isFunction(options) ? { setup: options } : options return isFunction(options) ? { setup: options } : options
} }

2
packages/runtime-core/src/apiOptions.ts
View File

@ -68,7 +68,7 @@ export interface ComponentOptionsBase<
inheritAttrs?: boolean inheritAttrs?: boolean
// type-only differentiator to separate OptionWithoutProps from a constructor // type-only differentiator to separate OptionWithoutProps from a constructor
// type returned by createComponent() or FunctionalComponent // type returned by defineComponent() or FunctionalComponent
call?: never call?: never
// type-only differentiators for built-in Vnode types // type-only differentiators for built-in Vnode types
__isFragment?: never __isFragment?: never

2
packages/runtime-core/src/component.ts
View File

@ -149,7 +149,7 @@ export interface ComponentInternalInstance {
const emptyAppContext = createAppContext() const emptyAppContext = createAppContext()
export function createComponentInstance( export function defineComponentInstance(
vnode: VNode, vnode: VNode,
parent: ComponentInternalInstance | null parent: ComponentInternalInstance | null
) { ) {

4
packages/runtime-core/src/h.ts
View File

@ -65,7 +65,7 @@ type RawChildren =
| VNodeChildren | VNodeChildren
| (() => any) | (() => any)
// fake constructor type returned from `createComponent` // fake constructor type returned from `defineComponent`
interface Constructor<P = any> { interface Constructor<P = any> {
__isFragment?: never __isFragment?: never
__isPortal?: never __isPortal?: never
@ -130,7 +130,7 @@ export function h<O>(
children?: RawChildren | RawSlots children?: RawChildren | RawSlots
): VNode ): VNode
// fake constructor type returned by `createComponent` // fake constructor type returned by `defineComponent`
export function h(type: Constructor, children?: RawChildren): VNode export function h(type: Constructor, children?: RawChildren): VNode
export function h<P>( export function h<P>(
type: Constructor<P>, type: Constructor<P>,

2
packages/runtime-core/src/index.ts
View File

@ -6,7 +6,7 @@ export * from './apiWatch'
export * from './apiLifecycle' export * from './apiLifecycle'
export * from './apiInject' export * from './apiInject'
export { nextTick } from './scheduler' export { nextTick } from './scheduler'
export { createComponent } from './apiCreateComponent' export { defineComponent } from './apiDefineComponent'
// Advanced API ---------------------------------------------------------------- // Advanced API ----------------------------------------------------------------

4
packages/runtime-core/src/renderer.ts
View File

@ -11,7 +11,7 @@ import {
} from './vnode' } from './vnode'
import { import {
ComponentInternalInstance, ComponentInternalInstance,
createComponentInstance, defineComponentInstance,
setupStatefulComponent, setupStatefulComponent,
Component, Component,
Data Data
@ -917,7 +917,7 @@ export function createRenderer<
parentSuspense: HostSuspenseBoundary | null, parentSuspense: HostSuspenseBoundary | null,
isSVG: boolean isSVG: boolean
) { ) {
const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance( const instance: ComponentInternalInstance = (initialVNode.component = defineComponentInstance(
initialVNode, initialVNode,
parentComponent parentComponent
)) ))

22
packages/runtime-dom/__tests__/directives/vModel.spec.ts
View File

@ -2,7 +2,7 @@ import {
createApp, createApp,
h, h,
nextTick, nextTick,
createComponent, defineComponent,
vModelDynamic, vModelDynamic,
withDirectives, withDirectives,
VNode VNode
@ -29,7 +29,7 @@ beforeEach(() => {
describe('vModel', () => { describe('vModel', () => {
it('should work with text input', async () => { it('should work with text input', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: null } return { value: null }
}, },
@ -60,7 +60,7 @@ describe('vModel', () => {
}) })
it('should work with textarea', async () => { it('should work with textarea', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: null } return { value: null }
}, },
@ -91,7 +91,7 @@ describe('vModel', () => {
}) })
it('should support modifiers', async () => { it('should support modifiers', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { number: null, trim: null, lazy: null } return { number: null, trim: null, lazy: null }
}, },
@ -160,7 +160,7 @@ describe('vModel', () => {
}) })
it('should work with checkbox', async () => { it('should work with checkbox', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: null } return { value: null }
}, },
@ -201,7 +201,7 @@ describe('vModel', () => {
}) })
it('should work with checkbox and true-value/false-value', async () => { it('should work with checkbox and true-value/false-value', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: null } return { value: null }
}, },
@ -244,7 +244,7 @@ describe('vModel', () => {
}) })
it('should work with checkbox and true-value/false-value with object values', async () => { it('should work with checkbox and true-value/false-value with object values', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: null } return { value: null }
}, },
@ -287,7 +287,7 @@ describe('vModel', () => {
}) })
it(`should support array as a checkbox model`, async () => { it(`should support array as a checkbox model`, async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: [] } return { value: [] }
}, },
@ -357,7 +357,7 @@ describe('vModel', () => {
}) })
it('should work with radio', async () => { it('should work with radio', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: null } return { value: null }
}, },
@ -417,7 +417,7 @@ describe('vModel', () => {
}) })
it('should work with single select', async () => { it('should work with single select', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: null } return { value: null }
}, },
@ -473,7 +473,7 @@ describe('vModel', () => {
}) })
it('should work with multiple select', async () => { it('should work with multiple select', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: [] } return { value: [] }
}, },

10
packages/runtime-dom/__tests__/directives/vShow.spec.ts
View File

@ -1,6 +1,6 @@
import { import {
withDirectives, withDirectives,
createComponent, defineComponent,
h, h,
nextTick, nextTick,
VNode VNode
@ -19,7 +19,7 @@ beforeEach(() => {
describe('runtime-dom: v-show directive', () => { describe('runtime-dom: v-show directive', () => {
test('should check show value is truthy', async () => { test('should check show value is truthy', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: true } return { value: true }
}, },
@ -35,7 +35,7 @@ describe('runtime-dom: v-show directive', () => {
}) })
test('should check show value is falsy', async () => { test('should check show value is falsy', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: false } return { value: false }
}, },
@ -51,7 +51,7 @@ describe('runtime-dom: v-show directive', () => {
}) })
it('should update show value changed', async () => { it('should update show value changed', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: true } return { value: true }
}, },
@ -100,7 +100,7 @@ describe('runtime-dom: v-show directive', () => {
}) })
test('should respect display value in style attribute', async () => { test('should respect display value in style attribute', async () => {
const component = createComponent({ const component = defineComponent({
data() { data() {
return { value: true } return { value: true }
}, },

8
packages/runtime-dom/__tests__/modules/class.spec.ts
View File

@ -1,6 +1,6 @@
// https://github.com/vuejs/vue/blob/dev/test/unit/features/directives/class.spec.js // https://github.com/vuejs/vue/blob/dev/test/unit/features/directives/class.spec.js
import { h, render, createComponent } from '../../src' import { h, render, defineComponent } from '../../src'
type ClassItem = { type ClassItem = {
value: string | object | string[] value: string | object | string[]
@ -100,21 +100,21 @@ describe('class', () => {
}) })
test('class merge between multiple nested components sharing same element', () => { test('class merge between multiple nested components sharing same element', () => {
const component1 = createComponent({ const component1 = defineComponent({
props: {}, props: {},
render() { render() {
return this.$slots.default()[0] return this.$slots.default()[0]
} }
}) })
const component2 = createComponent({ const component2 = defineComponent({
props: {}, props: {},
render() { render() {
return this.$slots.default()[0] return this.$slots.default()[0]
} }
}) })
const component3 = createComponent({ const component3 = defineComponent({
props: {}, props: {},
render() { render() {
return h( return h(

12
test-dts/createComponent.test-d.tsx → test-dts/defineComponent.test-d.tsx
View File

@ -1,5 +1,5 @@
import { expectError, expectType } from 'tsd' import { expectError, expectType } from 'tsd'
import { describe, createComponent, PropType, ref } from './index' import { describe, defineComponent, PropType, ref } from './index'
describe('with object props', () => { describe('with object props', () => {
interface ExpectedProps { interface ExpectedProps {
@ -12,7 +12,7 @@ describe('with object props', () => {
ddd: string[] ddd: string[]
} }
const MyComponent = createComponent({ const MyComponent = defineComponent({
props: { props: {
a: Number, a: Number,
// required should make property non-void // required should make property non-void
@ -126,7 +126,7 @@ describe('with object props', () => {
}) })
describe('type inference w/ optional props declaration', () => { describe('type inference w/ optional props declaration', () => {
const MyComponent = createComponent({ const MyComponent = defineComponent({
setup(_props: { msg: string }) { setup(_props: { msg: string }) {
return { return {
a: 1 a: 1
@ -149,14 +149,14 @@ describe('type inference w/ optional props declaration', () => {
}) })
describe('type inference w/ direct setup function', () => { describe('type inference w/ direct setup function', () => {
const MyComponent = createComponent((_props: { msg: string }) => {}) const MyComponent = defineComponent((_props: { msg: string }) => {})
expectType<JSX.Element>(<MyComponent msg="foo" />) expectType<JSX.Element>(<MyComponent msg="foo" />)
expectError(<MyComponent />) expectError(<MyComponent />)
expectError(<MyComponent msg={1} />) expectError(<MyComponent msg={1} />)
}) })
describe('type inference w/ array props declaration', () => { describe('type inference w/ array props declaration', () => {
createComponent({ defineComponent({
props: ['a', 'b'], props: ['a', 'b'],
setup(props) { setup(props) {
// props should be readonly // props should be readonly
@ -179,7 +179,7 @@ describe('type inference w/ array props declaration', () => {
}) })
describe('type inference w/ options API', () => { describe('type inference w/ options API', () => {
createComponent({ defineComponent({
props: { a: Number }, props: { a: Number },
setup() { setup() {
return { return {

14
test-dts/h.test-d.ts
View File

@ -2,7 +2,7 @@ import { expectError } from 'tsd'
import { import {
describe, describe,
h, h,
createComponent, defineComponent,
ref, ref,
Fragment, Fragment,
Portal, Portal,
@ -71,8 +71,8 @@ describe('h inference w/ plain object component', () => {
expectError(h(Foo, { foo: 1 })) expectError(h(Foo, { foo: 1 }))
}) })
describe('h inference w/ createComponent', () => { describe('h inference w/ defineComponent', () => {
const Foo = createComponent({ const Foo = defineComponent({
props: { props: {
foo: String, foo: String,
bar: { bar: {
@ -93,8 +93,8 @@ describe('h inference w/ createComponent', () => {
expectError(h(Foo, { bar: 1, foo: 1 })) expectError(h(Foo, { bar: 1, foo: 1 }))
}) })
describe('h inference w/ createComponent + optional props', () => { describe('h inference w/ defineComponent + optional props', () => {
const Foo = createComponent({ const Foo = defineComponent({
setup(_props: { foo?: string; bar: number }) {} setup(_props: { foo?: string; bar: number }) {}
}) })
@ -109,8 +109,8 @@ describe('h inference w/ createComponent + optional props', () => {
expectError(h(Foo, { bar: 1, foo: 1 })) expectError(h(Foo, { bar: 1, foo: 1 }))
}) })
describe('h inference w/ createComponent + direct function', () => { describe('h inference w/ defineComponent + direct function', () => {
const Foo = createComponent((_props: { foo?: string; bar: number }) => {}) const Foo = defineComponent((_props: { foo?: string; bar: number }) => {})
h(Foo, { bar: 1 }) h(Foo, { bar: 1 })
h(Foo, { bar: 1, foo: 'ok' }) h(Foo, { bar: 1, foo: 'ok' })

2
test-dts/tsx.test-d.tsx
View File

@ -1,4 +1,4 @@
// TSX w/ createComponent is tested in createComponent.test-d.tsx // TSX w/ defineComponent is tested in defineComponent.test-d.tsx
import { expectError, expectType } from 'tsd' import { expectError, expectType } from 'tsd'
import { KeepAlive, Suspense, Fragment, Portal } from '@vue/runtime-dom' import { KeepAlive, Suspense, Fragment, Portal } from '@vue/runtime-dom'