移除组件目标后，onDestroy 不起作用答案

【问题标题】：onDestroy not working when component target is removed移除组件目标后，onDestroy 不起作用
【发布时间】：2021-07-11 19:18:35
【问题描述】：

我遇到了一个问题，即当组件的父 HTML 元素被删除时，在 Svelte 组件内没有调用 onDestroy。我怎样才能解决这个问题？我正在像这样创建我的元素，以便与另一个 JS 库（TipTap/ProseMirror）正确交互。

示例：https://svelte.dev/repl/4e1ef2e35fce432b9ba63f87db0c95cb

App.svelte

<script>
    import Nested from "./Nested.svelte";
    import { onMount } from 'svelte';
    
    let target;
    
    onMount(() => {
        const root = document.getElementById("root");
        target = document.createElement("div");
        new Nested({ target });
        root.appendChild(target);
    });
</script>

<div id="root"></div>
<button on:click={() => target.remove()}>Remove</button>

嵌套的.svelte

<script>
    import { onMount, onDestroy } from 'svelte';
    
    onMount(() => console.log("mount")); // Run
    onDestroy(() => console.log("destroy")); // Not run
</script>

<h1>Nested Component</h1>

【问题讨论】：

标签： svelte

【解决方案1】：

如果你手动创建组件，你也需要手动销毁它。在删除 Dom 元素之前，您需要在其实例上调用 $destroy：

<script>
    import Nested from "./Nested.svelte";
    import { onMount } from 'svelte';
    
    let target;
    let nested;
    
    onMount(() => {
        const root = document.getElementById("root");
        target = document.createElement("div");
        nested = new Nested({ target });
        root.appendChild(target);
    });
</script>

<div id="root"></div>
<button on:click={() => { nested.$destroy();  target.remove() }}>Remove</button>

文档：https://svelte.dev/docs#$destroy

【讨论】：