面试题：Svelte组件内脚本编写之响应式变量

Question

在Svelte组件中，如何声明一个响应式变量，并在其值改变时触发相关DOM更新？请给出具体代码示例。

Answer 1

在Svelte组件中，可以使用$: 语法来声明响应式变量，当变量值改变时会自动触发相关DOM更新。以下是一个简单的代码示例：

<script>
    let count = 0;
    $: doubled = count * 2;
</script>

<button on:click={() => count++}>Increment</button>

<p>The value of count is {count}</p>
<p>Double the value of count is {doubled}</p>

在上述代码中：

1. 首先声明了一个普通变量count并初始化为0。
2. 然后使用$: 声明了一个响应式变量doubled，它的值是count的两倍。当count的值改变时，doubled的值会自动更新，并且相关DOM（即显示doubled值的<p>标签）也会随之更新。
3. 按钮的点击事件会使count的值增加，从而触发doubled的更新以及DOM更新。