面试题：Svelte组件生命周期中onMount的作用及使用场景

Question

在Svelte组件生命周期里，简述onMount函数的作用，并举例说明至少一个实际使用场景。

Answer 1

onMount函数的作用

onMount 函数是 Svelte 组件生命周期中的一个函数，它用于在组件挂载到 DOM 后立即执行代码。当组件首次渲染到 DOM 时，onMount 回调函数会被调用。这使得开发者可以执行一些需要 DOM 存在才能进行的操作，比如初始化第三方库（这些库通常依赖于已存在的 DOM 元素）、设置事件监听器等。

实际使用场景举例

1. 初始化第三方图表库：假设我们要在 Svelte 组件中使用 Chart.js 来绘制图表。

<script>
    import { onMount } from'svelte';
    import { Bar } from 'chart.js';

    let chart;
    const data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
            {
                label: 'My First Dataset',
                data: [65, 59, 80, 81, 56, 55],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgb(255, 99, 132)',
                borderWidth: 1
            }
        ]
    };

    onMount(() => {
        const ctx = document.getElementById('myChart').getContext('2d');
        chart = new Bar(ctx, {
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>

<canvas id="myChart"></canvas>

在上述代码中，onMount 确保了在 canvas 元素挂载到 DOM 后，才去获取 canvas 的 2D 上下文并初始化 Chart.js 图表。这样可以避免在 DOM 元素还不存在时尝试操作它而导致的错误。