面试题：Svelte中如何实现基本的状态管理

Question

在Svelte项目中，描述使用`$: `符号进行响应式状态更新的原理，并举例说明如何通过`$: `实现两个状态变量之间的联动。

Answer 1

$: 符号响应式状态更新原理

在Svelte中，$: 用于创建响应式语句。当$: 后的表达式所依赖的任何响应式变量发生变化时，该表达式会自动重新求值，从而实现响应式更新。Svelte会跟踪依赖关系，当依赖的状态改变，与之关联的使用$: 的语句就会被触发执行。

实现两个状态变量联动示例

<script>
    let count = 0;
    let doubledCount;

    $: doubledCount = count * 2;

    function increment() {
        count += 1;
    }
</script>

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

在上述代码中，doubledCount依赖于count。当count通过increment函数改变时，由于$: 的作用，doubledCount会自动重新计算，实现了两个状态变量之间的联动。