面试题：Svelte中readable store单向绑定原理及应用

Question

请阐述Svelte中readable store实现数据流单向绑定的原理，并举例说明在一个简单的计数器功能中，如何使用readable store来管理数据并实现单向绑定。

Answer 1

Svelte中readable store实现数据流单向绑定的原理

1. 核心概念：在Svelte中，readable store是一种可观察的数据源。它基于订阅 - 发布模式。一个readable store有一个subscribe方法，该方法允许其他部分（如组件）订阅这个store。当store的值发生变化时，所有订阅者都会收到通知。
2. 单向绑定原理：组件通过调用subscribe方法订阅readable store。当store中的数据更新时，Svelte的响应式系统会检测到这种变化，并自动重新渲染依赖于该store数据的组件部分。由于数据流动是从store到组件，而不是相反，从而实现了单向绑定。

使用readable store实现简单计数器功能及单向绑定示例

1. 创建项目：首先确保你已经安装了Svelte环境，比如使用npx degit sveltejs/template counter - app创建一个新的Svelte项目，并进入项目目录cd counter - app。
2. 定义readable store：在Svelte组件文件（例如App.svelte）中：

<script>
    import { readable } from'svelte/store';

    const countStore = readable(0, (set) => {
        let count = 0;
        const intervalId = setInterval(() => {
            count++;
            set(count);
        }, 1000);

        return () => clearInterval(intervalId);
    });

    let countValue;
    const unsubscribe = countStore.subscribe((value) => {
        countValue = value;
    });
</script>

<div>
    <p>Count: {countValue}</p>
</div>

<script>
    // 确保在组件销毁时取消订阅
    $: onDestroy(() => {
        unsubscribe();
    });
</script>

在上述代码中： - 首先通过readable创建了一个countStore，初始值为0。 - readable的第二个参数是一个启动函数，在这个函数中，我们通过setInterval每秒更新一次count的值，并使用set函数更新store的值。 - 组件通过subscribe方法订阅countStore，当store的值更新时，countValue也会更新，从而在模板中显示最新的计数。 - 最后通过onDestroy生命周期函数在组件销毁时取消订阅，避免内存泄漏。