面试题：Svelte中生命周期函数的调用时机

`onMount`

调用时机：当组件第一次插入到DOM中后调用。这意味着组件的模板已经被渲染并添加到了页面的DOM结构中，此时可以执行一些需要操作DOM或者依赖于DOM存在的副作用操作。
使用场景示例：假设我们有一个需要获取元素尺寸的需求，示例代码如下：

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

    let myElement;
    let elementWidth;

    onMount(() => {
        elementWidth = myElement.offsetWidth;
        console.log('Element width:', elementWidth);
    });
</script>

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

在上述代码中，onMount函数会在包含myElement的div元素被插入到DOM后执行，从而能够正确获取其宽度。

`beforeUpdate`

调用时机：在组件的响应式数据发生变化，且DOM即将更新之前被调用。这意味着组件已经检测到数据的改变，准备重新渲染，但此时DOM还没有更新。可以在这个函数中进行一些在更新DOM前需要做的操作，比如取消之前的动画或者清理一些临时资源。
使用场景示例：假设我们有一个简单的动画效果，当数据变化时需要取消之前的动画，代码如下：

<script>
    import { beforeUpdate } from'svelte';
    let value = 0;
    let animation;

    function increment() {
        value++;
    }

    beforeUpdate(() => {
        if (animation) {
            animation.cancel();
        }
    });
</script>

<button on:click={increment}>Increment</button>
<p>{value}</p>

在这个例子中，每次value变化触发DOM更新前，beforeUpdate函数会检查是否存在动画animation，如果存在则取消它，避免动画冲突。

`afterUpdate`

调用时机：在组件的响应式数据发生变化，且DOM已经更新完成后被调用。此时可以执行一些依赖于更新后DOM状态的操作，比如重新初始化一些基于DOM的第三方库，或者执行新的动画。
使用场景示例：假设我们使用一个第三方的图表库，每次数据更新后需要重新渲染图表，示例代码如下：

<script>
    import { afterUpdate } from'svelte';
    import Chart from 'chart.js';

    let chartData = {
        labels: ['A', 'B', 'C'],
        datasets: [{
            data: [10, 20, 30]
        }]
    };

    let chart;

    function updateData() {
        chartData.datasets[0].data = [15, 25, 35];
    }

    afterUpdate(() => {
        if (chart) {
            chart.destroy();
        }
        const ctx = document.getElementById('myChart').getContext('2d');
        chart = new Chart(ctx, {
            type: 'bar',
            data: chartData
        });
    });
</script>

<button on:click={updateData}>Update Chart</button>
<canvas id="myChart"></canvas>

在上述代码中，每次chartData数据更新导致DOM更新完成后，afterUpdate函数会销毁之前的图表实例并重新创建一个新的图表，保证图表能够正确反映最新的数据。

面试题：Svelte中生命周期函数的调用时机

知识考点

面试题答案

`onMount`

`beforeUpdate`

`afterUpdate`