Svelte中父组件被{#if}移除时子组件onDestroy未触发问题

问题现象 #

• 原写法中：当panels数组长度变为0时，App组件的{#if}块会移除ComponentA，此时ComponentA的onDestroy钩子正常触发（控制台打印DESTROYING COMPONENT A），但其子组件ComponentB的onDestroy钩子未触发（无对应日志）。
• 修改后写法：让ComponentA始终存在，当panels为空时，ComponentA内部的{#each}块处理空数组，ComponentB的onDestroy钩子会正常触发。

代码示例 #

原写法：App.svelte #

<script>
  let panels = []
</script>
{#if panels.length === 0}
  <!-- 显示其他组件创建首个面板 -->
{:else}
  <ComponentA bind:panels />
{/if}

ComponentA.svelte #

<script>
  export let panels
  import { onDestroy } from 'svelte'
  onDestroy(() => {console.log("DESTROYING COMPONENT A")})
</script>
{#each panels as panel (panel.id) }
  <ComponentB {panel} />
{/each}

ComponentB.svelte #

<script>
  export let panel
  import { onDestroy } from 'svelte'
  onDestroy(() => {console.log("DESTROYING COMPONENT B")})
</script>

修改后：App.svelte #

<script>
  let panels = []
</script>
{#if panels.length === 0}
  <!-- 显示其他组件创建首个面板 -->
{/if}
<ComponentA bind:panels />

原因解释 #

这和bind语法无关，核心是Svelte处理组件销毁的两种不同逻辑：

• 原写法场景：当panels变为空时，App组件的{#if}块直接标记ComponentA为待销毁并整体移除。此时Svelte会批量回收ComponentA的整个组件实例及其子树，为了优化性能，不会单独触发子组件ComponentB的onDestroy钩子——子组件的销毁是父组件销毁流程的一部分，而非由内部条件块触发的主动移除操作。
• 修改后场景：ComponentA始终存在，当panels变为空时，ComponentA内部的{#each}块会主动检测到数组为空，逐个移除ComponentB实例。这种由组件内部响应式更新引发的销毁操作，会正常触发每个ComponentB的onDestroy钩子。

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