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

问题描述

我遇到了一个问题，即当 svelte 组件的父 HTML 元素被移除时，不会在该组件内调用 function ref_URL_formula3(){ var libro = SpreadsheetApp.getActiveSpreadsheet(); var hoja = libro.getActiveSheet(); var rangoURLvalor = hoja.getRange('E10:E34').getValues(); var rangoREFvalor = hoja.getRange('C10:C34').getValues(); var rangoFormula = hoja.getRange('I10:I34'); var formulas = rangoURLvalor.map(function (v,i) { return ['IF(SEARCH("' + v + '"; E' + (i + 10) + ');' + rangoREFvalor[i] +';"")'] }) rangoFormula.setFormulas(formulas) } 。我怎样才能解决这个问题？我正在像这样创建我的元素，以便与另一个 JS 库（TipTap/ProseMirror）正确交互。

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

App.svelte

onDestroy

嵌套.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>

解决方法

如果你手工创建组件，你也需要手工销毁它。您需要在删除 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