如何让父组件等待子组件的onMount钩子执行完成后再渲染？

针对你的需求，分两种场景给出具体解决方案：

场景1：子组件初始化是同步操作（比如读取localStorage） #

你的代码里localStorage.theme是同步可访问的，完全不需要放到onMount钩子中执行——onMount是组件挂载到DOM后才触发的，这正是导致初始渲染闪烁的核心原因。直接在组件初始化阶段同步获取theme值即可解决问题：

修改后的Child.svelte：

<script>
  // 直接同步读取localStorage，加默认值避免无数据时的异常
  let theme: string = localStorage.theme ?? "light";

  const setTheme = (value) => {
    theme = value;
    localStorage.theme = theme;
  };
</script>

<button
  type="button"
  on:click={() => setTheme(theme === "dark" ? "light" : "dark")}
>
  {theme === "dark" ? "IconMoon" : "IconSun"}
</button>

这样子组件初始化时就有正确的theme值，不会出现先显示IconSun再切换的情况，父组件也不需要额外等待逻辑。

场景2：子组件初始化包含异步操作（比如API请求） #

如果子组件的初始化必须依赖onMount中的异步操作，那么可以通过状态通知的方式让父组件等待：

Parent.svelte #

<script>
  import Child from "./Child.svelte";
  let childLoaded = false;
</script>

<!-- 仅在子组件加载完成后渲染 -->
{#if childLoaded}
  <Child bind:loaded={childLoaded} />
{/if}

Child.svelte #

<script>
  import { onMount } from "svelte";

  // 暴露给父组件的加载状态
  export let loaded = false;
  let theme: string;

  onMount(async () => {
    // 模拟异步操作（比如API请求）
    await new Promise(resolve => setTimeout(resolve, 100));
    
    theme = localStorage.theme ?? "light";
    setTheme(theme);
    // 通知父组件：初始化完成
    loaded = true;
  });

  const setTheme = (value) => {
    theme = value;
    localStorage.theme = theme;
  };
</script>

<button
  type="button"
  on:click={() => setTheme(theme === "dark" ? "light" : "dark")}
>
  {theme === "dark" ? "IconMoon" : "IconSun"}
</button>

子组件在onMount执行完成后，通过修改loaded状态通知父组件，父组件根据这个状态决定是否渲染子组件，从而实现"等待子组件初始化完成后再渲染"的效果。

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