面试题：Svelte中beforeUpdate函数的基本应用

Question

请简述Svelte中beforeUpdate函数的触发时机，并举例说明在一个简单的计数器组件中，如何使用beforeUpdate函数在每次更新DOM前执行一些逻辑，比如记录更新前的计数数值。

Answer 1

beforeUpdate函数触发时机

在Svelte中，beforeUpdate函数会在组件的状态发生变化，且DOM即将更新之前被触发。这意味着当组件的响应式数据（如变量、对象属性等）改变，Svelte开始准备更新DOM来反映这些变化时，beforeUpdate函数会首先被调用。

计数器组件中使用beforeUpdate函数示例

<script>
    let count = 0;
    let previousCount;

    function increment() {
        count++;
    }

    beforeUpdate(() => {
        previousCount = count - 1;
        console.log(`更新前的计数数值: ${previousCount}`);
    });
</script>

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

在上述代码中，每次点击按钮使count增加时，beforeUpdate函数会在DOM更新显示新的count值之前被调用，在函数内部记录并打印更新前的count数值（即previousCount）。