面试题：Svelte中onMount函数的常见应用场景

Question

请简述在Svelte组件开发中，onMount生命周期函数的常见应用场景有哪些，并举例说明如何使用它来操作DOM元素或进行数据请求。

Answer 1

常见应用场景

1. 操作DOM元素：当组件挂载到DOM后，需要对DOM进行一些初始化操作，比如添加事件监听器、设置元素样式等。
2. 数据请求：在组件渲染到页面后，立即发起数据请求，获取数据并更新组件状态。
3. 第三方库初始化：当需要在组件挂载后初始化一些第三方库，例如图表库、地图库等。

操作DOM元素示例

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

    let myDiv;

    onMount(() => {
        myDiv.style.color = 'red';
        myDiv.addEventListener('click', () => {
            console.log('Div was clicked');
        });
    });
</script>

<div bind:this={myDiv}>This is a div</div>

数据请求示例

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

    onMount(async () => {
        const response = await fetch('https://example.com/api/data');
        data = await response.json();
    });
</script>

{#if data}
    <p>{JSON.stringify(data)}</p>
{:else}
    <p>Loading...</p>
{/if}