删除组件目标时 onDestroy 不起作用

Question

我遇到一个问题，当 Svelte 组件的父 HTML 元素被移除时，onDestroy 不会在 Svelte 组件内部被调用。我怎样才能解决这个问题？我正在这样创建我的元素，以便与另一个 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>

Nested.svelte

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

<h1>Nested Component</h1>

Answer 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

删除组件目标时 onDestroy 不起作用

onDestroy not working when component target is removed

svelte