面试题：Svelte 中 beforeUpdate 和 afterUpdate 的典型应用场景区别

Question

请阐述 Svelte 中 beforeUpdate 和 afterUpdate 生命周期函数的典型应用场景，并举例说明两者在实际使用中的区别。

Answer 1

beforeUpdate 典型应用场景及举例

1. 典型应用场景：在组件更新前，对即将更新的状态做最后的准备工作，比如取消之前的动画效果、暂停定时器等，避免在更新过程中产生冲突。
2. 举例：假设一个组件中有一个动画元素，当数据更新时动画可能需要重新开始。在 beforeUpdate 中可以先暂停当前动画。

<script>
    let count = 0;
    let animation;
    function startAnimation() {
        // 实际的动画启动代码，这里简化示意
        animation = setInterval(() => {
            console.log('动画进行中');
        }, 1000);
    }
    function increment() {
        count++;
    }
    $: beforeUpdate(() => {
        if (animation) {
            clearInterval(animation);
        }
    });
    $: onMount(() => {
        startAnimation();
    });
</script>

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

afterUpdate 典型应用场景及举例

1. 典型应用场景：在组件更新完成后执行某些操作，比如重新启动动画、更新DOM相关的第三方库（因为此时DOM已经更新完毕）、重新计算布局等。
2. 举例：还是上述动画的例子，在 afterUpdate 中重新启动动画。

<script>
    let count = 0;
    let animation;
    function startAnimation() {
        // 实际的动画启动代码，这里简化示意
        animation = setInterval(() => {
            console.log('动画进行中');
        }, 1000);
    }
    function increment() {
        count++;
    }
    $: afterUpdate(() => {
        if (!animation) {
            startAnimation();
        }
    });
    $: onMount(() => {
        startAnimation();
    });
</script>

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

两者在实际使用中的区别

• beforeUpdate 在组件状态发生变化，且DOM更新之前被调用。此时组件的状态已经是新值，但DOM还未更新。主要用于清理或准备工作，防止更新过程中出现问题。
• afterUpdate 在组件状态发生变化，且DOM更新完成之后被调用。此时可以操作更新后的DOM，进行依赖于最新DOM状态的操作，比如重新初始化一些需要DOM的第三方库等。