Svelte运行时

命令式组件 API

每个 Svelte 应用程序都以命令式创建根组件开始。在客户端，此组件会挂载到特定元素。在服务器端，您希望返回一个 HTML 字符串，您可以将其呈现。以下函数可帮助您完成这些任务。

mount

实例化组件并将其挂载到给定的目标

import { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.
Transitions will play during the initial render unless the intro option is set to false.
mount } from 'svelte';
import type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentTypeApp from './App.svelte';

const const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>app = mount<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>>(component: ComponentType<...> | Component<...>, options: MountOptions<...>): {
    ...;
} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.
Transitions will play during the initial render unless the intro option is set to false.
mount(const App: LegacyComponentTypeApp, {
	target: Document | Element | ShadowRootTarget element where the component will be mounted.
target: var document: DocumentMDN Reference
document.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.
MDN Reference
querySelector('#app'),
	props?: Record<string, any> | undefinedComponent properties.
props: { some: stringsome: 'property' }
});

您可以在每个页面上挂载多个组件，也可以从应用程序内部挂载，例如在创建工具提示组件并将其附加到悬停元素时。

请注意，与在 Svelte 4 中调用 new App(...) 不同，诸如效果（包括 onMount 回调和操作函数）之类的内容不会在 mount 期间运行。如果您需要强制挂起的效果运行（例如在测试上下文中），您可以使用 flushSync() 来执行此操作。

unmount

卸载使用 mount 或 hydrate 创建的组件

import { function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: MountOptions<Props>): ExportsMounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.
Transitions will play during the initial render unless the intro option is set to false.
mount, function unmount(component: Record<string, any>): voidUnmounts a component that was previously mounted using mount or hydrate.
unmount } from 'svelte';
import type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentTypeApp from './App.svelte';

const const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>app = mount<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>>(component: ComponentType<...> | Component<...>, options: MountOptions<...>): {
    ...;
} & Record<...>Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component.
Transitions will play during the initial render unless the intro option is set to false.
mount(const App: LegacyComponentTypeApp, {...});

// later
function unmount(component: Record<string, any>): voidUnmounts a component that was previously mounted using mount or hydrate.
unmount(const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>app);

render

仅在服务器端以及使用 server 选项编译时可用。获取组件并返回一个在其上具有 body 和 head 属性的对象，您可以使用这些属性在服务器端渲染应用程序时填充 HTML

import { function render<Comp extends SvelteComponent<any> | Component<any>, Props extends ComponentProps<Comp> = ComponentProps<Comp>>(...args: {} extends Props ? [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options?: {
    props?: Omit<Props, "$$slots" | "$$events">;
    context?: Map<any, any>;
}] : [component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp, options: {
    props: Omit<Props, "$$slots" | "$$events">;
    context?: Map<any, any>;
}]): RenderOutputOnly available on the server and when compiling with the server option.
Takes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.
render } from 'svelte/server';
import type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentTypeApp from './App.svelte';

const const result: RenderOutputresult = render<SvelteComponent<Record<string, any>, any, any>, Record<string, any>>(component: ComponentType<SvelteComponent<Record<string, any>, any, any>>, options?: {
    ...;
} | undefined): RenderOutputOnly available on the server and when compiling with the server option.
Takes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.
render(const App: LegacyComponentTypeApp, {
	props?: Omit<Record<string, any>, "$$slots" | "$$events"> | undefinedprops: { some: stringsome: 'property' }
});
const result: RenderOutputresult.RenderOutput.body: stringHTML that goes somewhere into the &#x3C;body>
body; // HTML for somewhere in this <body> tag
const result: RenderOutputresult.RenderOutput.head: stringHTML that goes into the &#x3C;head>
head; // HTML for somewhere in this <head> tag

hydrate

类似于 mount，但会重用 Svelte 的 SSR 输出（来自 render 函数）在目标内部呈现的任何 HTML 并使其具有交互性

import { function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(component: ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>, options: {} extends Props ? {
    target: Document | Element | ShadowRoot;
    props?: Props;
    events?: Record<string, (e: any) => any>;
    context?: Map<any, any>;
    intro?: boolean;
    recover?: boolean;
} : {
    target: Document | Element | ShadowRoot;
    props: Props;
    events?: Record<string, (e: any) => any>;
    context?: Map<any, any>;
    intro?: boolean;
    recover?: boolean;
}): ExportsHydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component
hydrate } from 'svelte';
import type App = SvelteComponent<Record<string, any>, any, any>
const App: LegacyComponentTypeApp from './App.svelte';

const const app: {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<string, any>app = hydrate<Record<string, any>, {
    $on?(type: string, callback: (e: any) => void): () => void;
    $set?(props: Partial<Record<string, any>>): void;
} & Record<...>>(component: ComponentType<...> | Component<...>, options: {
    ...;
}): {
    ...;
} & Record<...>Hydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component
hydrate(const App: LegacyComponentTypeApp, {
	target: Document | Element | ShadowRoottarget: var document: DocumentMDN Reference
document.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)Returns the first element that is a descendant of node that matches selectors.
MDN Reference
querySelector('#app'),
	props?: Record<string, any> | undefinedprops: { some: stringsome: 'property' }
});

与 mount 一样，效果不会在 hydrate 期间运行 - 如果您需要它们运行，请立即使用 flushSync()。

在 GitHub 上编辑此页面

生命周期钩子测试