面试题：Svelte中响应式变量的基本绑定与更新机制

Question

在Svelte中，阐述如何创建一个响应式变量，并将其绑定到DOM元素上，当变量值发生变化时，DOM如何自动更新？请举例说明。

Answer 1

1. 创建响应式变量并绑定到DOM元素：
   • 在Svelte中，可以使用let关键字声明变量，并通过bind:value语法将其绑定到DOM元素。例如，创建一个简单的文本输入框，当输入框的值改变时，对应的文本会自动更新。
   • 以下是一个示例代码：

<script>
    let name = 'World';
</script>

<input type="text" bind:value={name}>
<p>Hello, {name}!</p>

• 在上述代码中：
  • 首先使用let声明了一个变量name并初始化为'World'。
  • 然后在<input>元素上使用bind:value={name}，这就建立了变量name和输入框值之间的双向绑定。
  • 当输入框的值发生变化时，name变量的值也会随之改变，同时<p>标签中的文本会因为name变量的变化而自动更新，因为它依赖于name变量。

2. 另一种常见场景：使用$: 声明响应式变量：
   • $:用于创建派生的响应式变量。例如，假设有一个数字变量count，我们想要创建一个新的变量doubleCount，它是count的两倍，并且当count变化时，doubleCount也自动更新。
   • 代码如下：

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

<button on:click={() => count++}>Increment</button>
<p>The count is {count}, and double the count is {doubleCount}</p>

• 在这个例子中：
  • 点击按钮时，count变量增加。
  • 由于doubleCount是通过$:声明的派生响应式变量，它依赖于count，所以当count变化时，doubleCount会自动重新计算，<p>标签中的文本也会相应更新。