面试题：Svelte组件销毁时如何确保资源彻底释放

Question

当Svelte组件被销毁时，可能存在一些需要释放的资源，比如定时器、事件监听器等。请阐述在Svelte组件销毁阶段，怎样全面且高效地确保这些资源被彻底释放，同时避免内存泄漏，给出详细的代码示例及原理说明。

Answer 1

原理说明

在Svelte组件销毁时，为确保资源彻底释放避免内存泄漏，需在组件生命周期的 onDestroy 钩子函数中进行资源清理。onDestroy 会在组件从DOM中移除时调用，此时可清理定时器、移除事件监听器等。

代码示例

1. 定时器清理示例

<script>
    import { onDestroy } from'svelte';

    let timer;
    const startTimer = () => {
        timer = setInterval(() => {
            console.log('Timer is running');
        }, 1000);
    };

    startTimer();

    onDestroy(() => {
        clearInterval(timer);
        console.log('Timer cleared');
    });
</script>

<button on:click={startTimer}>Start Timer</button>

在上述代码中，setInterval 创建了一个定时器，在 onDestroy 钩子函数中使用 clearInterval 来清理定时器，防止其在组件销毁后继续运行导致内存泄漏。

2. 事件监听器清理示例

<script>
    import { onDestroy } from'svelte';

    const handleClick = () => {
        console.log('Document clicked');
    };

    document.addEventListener('click', handleClick);

    onDestroy(() => {
        document.removeEventListener('click', handleClick);
        console.log('Click event listener removed');
    });
</script>

这里给 document 添加了一个点击事件监听器 handleClick，在 onDestroy 中使用 removeEventListener 移除该监听器，确保组件销毁时事件监听器被清理，避免内存泄漏。