面试题：Svelte双向绑定在表单元素中的应用

Question

在Svelte中，如何实现一个文本输入框与组件数据的双向绑定？请写出关键代码，并解释双向绑定的原理。

Answer 1

关键代码

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

<input type="text" bind:value={name}>
<p>你输入的是: {name}</p>

双向绑定原理

在Svelte中，双向绑定通过bind:指令实现。当使用bind:value时，Svelte会在输入框的input事件触发时，将输入框的值更新到与之绑定的变量（如上述代码中的name）。同时，当绑定的变量值发生变化时，Svelte会更新输入框的value属性，从而实现双向同步。这一机制依赖于Svelte的响应式系统，该系统能够追踪变量的变化并自动更新DOM，使得开发者无需手动处理事件和状态同步逻辑。