面试题：Svelte单向绑定在组件中的应用

Question

在Svelte中，假设有一个父组件Parent和子组件Child，父组件有一个变量`message`，请描述如何将`message`单向绑定到子组件中展示，并解释在这个过程中Svelte单向绑定的原理。

Answer 1

1. 将 message 单向绑定到子组件展示的方法

1. 子组件定义： 在子组件 Child.svelte 中定义一个接收 message 的变量。

   <script>
       export let message;
   </script>
   
   <p>{message}</p>
   

2. 父组件使用： 在父组件 Parent.svelte 中引入子组件，并传递 message。

   <script>
       import Child from './Child.svelte';
       let message = 'Hello from parent';
   </script>
   
   <Child {message}/>
   

2. Svelte 单向绑定原理

Svelte 在编译时进行静态分析。对于像上述父组件向子组件传递数据的单向绑定，Svelte 会生成代码来跟踪数据的变化。当父组件中的 message 变量发生变化时，Svelte 会检测到这种变化，然后通过更新 DOM 的相关部分，将新的值传递给子组件并更新子组件的展示。它通过一种细粒度的响应式系统来实现，利用 JavaScript 的赋值操作等事件触发重新渲染相关部分，而不是进行全局的重新渲染，以此提高效率。