面试题：Svelte中writable与readable存储的基础使用差异

定义区别

writable store：可写存储，不仅可以读取数据，还能修改数据。它通过 writable 函数创建，该函数接受一个初始值作为参数。
readable store：可读存储，主要用于只读数据的场景。通过 readable 函数创建，该函数接受一个初始值和一个可选的启动函数。

数据修改方式区别

writable store：通过 set 方法或 update 方法来修改数据。set 方法直接设置新的值，update 方法接收一个回调函数，在回调函数中基于当前值计算出新值。
readable store：本身不提供直接修改数据的方法，因为其设计初衷是只读。如果要修改，通常需要在外部创建逻辑来改变其依赖的数据，并重新计算可读存储的值。

应用场景区别

writable store：适用于需要在组件间共享可变数据的场景，比如用户登录状态、购物车商品数量等，这些数据可能随时被修改。
readable store：适用于数据不需要被直接修改，而是根据其他数据或外部源（如定时器、API 轮询等）自动更新的场景，比如获取系统当前时间。

代码示例

writable store 示例

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

    // 创建一个 writable store
    const count = writable(0);

    function increment() {
        // 使用 update 方法更新数据
        count.update(n => n + 1);
    }
</script>

<button on:click={increment}>
    Count: {$count}
</button>

readable store 示例

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

    // 创建一个可读存储，用于获取当前时间
    const currentTime = readable(new Date(), set => {
        const interval = setInterval(() => {
            set(new Date());
        }, 1000);

        return () => clearInterval(interval);
    });
</script>

<p>The current time is: {$currentTime}</p>

星途面试题库

面试题：Svelte中writable与readable存储的基础使用差异

知识考点

面试题答案

定义区别

数据修改方式区别

应用场景区别

代码示例

writable store 示例

readable store 示例