面试题：Svelte 中 onMount 和 onDestroy 的基本使用场景

Question

请简要阐述在 Svelte 组件中，onMount 和 onDestroy 生命周期函数通常会在哪些场景下使用？并各举一个简单代码示例说明。

Answer 1

onMount 使用场景及示例

1. 使用场景：当组件被插入到 DOM 中后，需要执行一些副作用操作，比如初始化第三方库、订阅事件等。
2. 代码示例：

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

    let element;

    onMount(() => {
        element.textContent = 'Component has been mounted';
    });
</script>

<div bind:this={element}></div>

onDestroy 使用场景及示例

1. 使用场景：当组件从 DOM 中移除时，需要清理一些资源，比如取消订阅的事件、清除定时器等。
2. 代码示例：

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

    let intervalId;

    onMount(() => {
        intervalId = setInterval(() => {
            console.log('Interval is running');
        }, 1000);
    });

    onDestroy(() => {
        clearInterval(intervalId);
    });
</script>