面试题：Svelte Context API数据更新与响应式处理

Question

在Svelte的Context API场景下，如果父组件传递给子组件的数据发生变化，子组件如何实现响应式更新？请阐述原理并给出代码示例说明如何正确监听Context数据变化并重新渲染子组件。

Answer 1

原理

在Svelte的Context API中，setContext 用于在父组件中设置上下文数据，getContext 用于子组件获取该数据。当父组件传递的数据变化时，子组件想要实现响应式更新，是依赖于Svelte的响应式系统。Svelte会自动追踪对响应式数据的读取和修改操作。通过 getContext 获取到的上下文数据如果是响应式数据（如 $: 声明的响应式变量），当该数据变化时，Svelte会自动检测到并触发相关组件的重新渲染。

代码示例

1. 父组件（App.svelte）

<script>
    import Child from './Child.svelte';
    import { setContext } from'svelte';
    let sharedData = 'initial value';
    setContext('sharedContext', { sharedData });
    let count = 0;
    const updateData = () => {
        sharedData = `new value ${count++}`;
    };
</script>

<button on:click={updateData}>Update shared data</button>
<Child />

2. 子组件（Child.svelte）

<script>
    import { getContext } from'svelte';
    const { sharedData } = getContext('sharedContext');
</script>

<p>The shared data is: {sharedData}</p>

在上述代码中，父组件 App.svelte 通过 setContext 设置了上下文数据 sharedData。子组件 Child.svelte 使用 getContext 获取该数据。当父组件中 sharedData 被更新时，由于Svelte的响应式系统，子组件会自动重新渲染并显示最新的数据。