面试题：Svelte响应式表达式中等难度题

Question

在Svelte中，假设有一个响应式变量`count`，初始值为0，还有一个函数`increment`用于增加`count`的值。请编写一个响应式表达式，当`count`的值大于5时，在控制台打印出'Count is greater than 5'，并阐述为什么该表达式会在`count`变化时自动更新。

Answer 1

<script>
    let count = 0;
    const increment = () => {
        count++;
    };

    $: {
        if (count > 5) {
            console.log('Count is greater than 5');
        }
    };
</script>

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

在Svelte中，以$:开头的语句是响应式语句。Svelte会自动追踪响应式语句中使用到的响应式变量（这里是count）。当count的值发生变化时，Svelte会重新执行$:后的代码块，从而实现自动更新并检查count是否大于5，若大于5则打印相应信息。这是Svelte响应式系统的特性，它通过依赖追踪机制，自动检测响应式变量的变化并触发相关的副作用（这里就是执行打印操作）。