面试题：Svelte模板语法之响应式数据绑定

Question

在Svelte中，如何实现响应式数据绑定？请举例说明使用$:语法和双向绑定语法分别在不同场景下的应用。

Answer 1

使用 $: 语法实现响应式数据绑定

1. 场景：当一个变量的值依赖于其他变量，并且需要在依赖变量变化时自动更新该变量的值。
2. 示例：

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

<button on:click={() => count++}>Increment</button>
<p>The count is {count}</p>
<p>Doubled count is {doubledCount}</p>

在上述代码中，doubledCount 依赖于 count，每当 count 变化时，doubledCount 会自动更新。

使用双向绑定语法实现响应式数据绑定

1. 场景：常用于表单元素，使得用户输入和组件内部数据状态保持同步。
2. 示例：

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

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

在这个例子中，input 元素的 value 通过双向绑定 bind:value 与 name 变量关联。用户在输入框输入内容，name 会同步更新；name 变量值变化时，输入框内容也会更新。