Svelte动态组件切换：实例复用还是每次创建新实例？

你的实现方式每次切换都会生成新的组件实例，不会保留A或B的实例状态，具体细节如下：

• 当element从A切换为B时，原A组件实例会被Svelte销毁；切回A时，会重新创建一个全新的A组件实例，同时B的实例也会被销毁。
• 对应你提到的HTTP请求场景：如果B组件的请求是写在onMount钩子或组件顶级脚本中（比如直接在<script>里执行），那么每次切换到B时，这个请求都会重新执行——因为每次都是新的B实例完成初始化流程。

如果想要保留组件实例状态（比如让B只加载一次数据），可以改用渲染后隐藏的方式，让两个组件实例始终存在于DOM中，仅控制显示/隐藏：

<script lang="ts">
    import { eventData } from "./store";
    import A from "./components/A.svelte";
    import B from "./components/B.svelte";

    let showB;
    eventData.subscribe((data) => {
        showB = data.showB;
    });
</script>

<div>
    <A style="display: {showB ? 'none' : 'block'}" />
    <B style="display: {showB ? 'block' : 'none'}" />
</div>

这种方式下，A和B都会在页面初始化时创建一次实例，切换时只是修改显示状态，不会销毁实例，因此B的HTTP请求只会执行一次。

内容的提问来源于stack exchange，提问作者smallpepperz