每个 Svelte 应用程序都通过强制创建根组件开始。在客户端，此组件被挂载到特定元素上。在服务器上，你希望得到一个 HTML 字符串，你可以用它进行渲染。以下函数可以帮助你完成这些任务。 ## `挂载` 实例化一个组件并将其挂载到指定的目标： ```js // @errors: 2322 import { mount } from 'svelte'; import App from './App.svelte'; const app = mount(App, { target: document.querySelector('#app'), props: { some: 'property' } }); ``` 您可以在每页上挂载多个组件，也可以在您的应用程序内部挂载，例如在创建工具提示组件并将其附加到悬停元素时。请注意，与在 Svelte 4 中调用 `new App(...)` 不同，在 `mount` 期间，像效果（包括 `onMount` 回调和操作函数）这样的操作将不会运行。如果您需要强制挂起的操作运行（例如在测试的上下文中），可以使用 `flushSync()` 来实现。 ## `卸载` 卸载之前使用 [`mount`](#mount) 或 [`hydrate`](#hydrate) 创建的组件。如果 `options.outro` 是 `true`，则在组件从 DOM 中移除之前，将播放 [transitions](transition)。 ```js import { mount, unmount } from 'svelte'; import App from './App.svelte'; const app = mount(App, { target: document.body }); // later unmount(app, { outro: true }); ``` 返回一个在过渡完成后解决的 `Promise`，如果 `options.outro` 为 true，否则立即解决。 ## `渲染` 仅适用于服务器上，并在使用`服务器`选项编译时可用。接受一个组件并返回一个具有和属性的`body`和`head`属性的对象，您可以使用它来在服务器端渲染您的应用程序时填充 HTML： ```js // @errors: 2724 2305 2307 import { render } from 'svelte/server'; import App from './App.svelte'; const result = render(App, { props: { some: 'property' } }); result.body; // HTML for somewhere in this tag result.head; // HTML for somewhere in this tag ``` ## `水合` 与`mount`类似，但会重用 Svelte 的 SSR 输出（来自[`render`](#render)函数）中在目标内的任何 HTML 渲染，使其变为交互式： ```js // @errors: 2322 import { hydrate } from 'svelte'; import App from './App.svelte'; const app = hydrate(App, { target: document.querySelector('#app'), props: { some: 'property' } }); ``` 与`mount`一样，在`hydrate`期间不会运行效果 — 如果需要，请立即使用`flushSync()`。