面试题：Svelte onMount与其他生命周期函数的协作

Question

在Svelte组件内，onMount与其他生命周期函数（如beforeUpdate、afterUpdate等）如何协作，以实现复杂的组件逻辑？请描述协作的原理，并给出一个具体的示例，例如在组件更新前后进行数据缓存与恢复。

Answer 1

协作原理

1. onMount：在组件首次渲染到DOM后触发。常用于初始化操作，如设置事件监听器、获取外部数据等。
2. beforeUpdate：在组件数据变化，DOM更新之前触发。可用于在更新前执行一些准备工作，如清理旧的缓存数据。
3. afterUpdate：在组件数据变化，DOM更新完成后触发。可用于在更新后执行一些操作，如恢复缓存数据、重新设置依赖于新DOM状态的事件监听器。

这些生命周期函数按照特定顺序执行，通过合理利用它们，能实现复杂的组件逻辑。

示例代码

<script>
    import { onMount, beforeUpdate, afterUpdate } from'svelte';

    let data = { message: 'Initial data' };
    let cachedData;

    onMount(() => {
        console.log('Component mounted.');
        // 模拟从外部获取数据
        data = { message: 'Data from external source' };
    });

    beforeUpdate(() => {
        console.log('Before component update.');
        // 缓存当前数据
        cachedData = {...data };
    });

    afterUpdate(() => {
        console.log('After component update.');
        // 恢复缓存数据（这里简单演示，实际应用可根据业务逻辑调整）
        data = {...cachedData };
    });
</script>

<div>
    <p>{data.message}</p>
    <button on:click={() => data.message = 'New message'}>Update data</button>
</div>

在这个示例中，onMount用于组件挂载时初始化或获取数据，beforeUpdate在数据更新前缓存数据，afterUpdate在数据更新后恢复缓存数据。