面试题：Svelte中派生存储（derived store）的基础原理及应用

Question

请解释Svelte中派生存储（derived store）是什么，它和普通存储（store）有什么区别。并举例说明在一个简单的计数器应用中，如何使用派生存储来实时计算当前计数的平方值。

Answer 1

1. Svelte中派生存储（derived store）的定义

派生存储是基于一个或多个现有存储创建的新存储。它的值会根据其依赖的存储的值变化而自动更新。

2. 派生存储和普通存储的区别

• 普通存储：是一个简单的可观察对象，直接保存一个值，并在值发生变化时通知订阅者。例如，一个用于存储用户名的普通存储，只关心用户名这一个值的变化。
• 派生存储：依赖于其他存储，它的值是基于这些依赖存储计算出来的。它不会直接保存用户输入的值，而是根据依赖存储动态计算得出结果。例如，基于存储用户年龄的普通存储，派生出存储用户年龄十年后的派生存储，这个派生存储的值根据年龄存储的值动态变化。

3. 简单计数器应用中使用派生存储计算当前计数平方值的示例

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

    // 创建一个普通存储用于计数
    const count = writable(0);

    // 创建派生存储用于计算计数的平方值
    const countSquared = derived(count, $count => $count * $count);
</script>

<button on:click={() => count.update(n => n + 1)}>Increment</button>
<p>Count: {$count}</p>
<p>Count Squared: {$countSquared}</p>

在上述代码中：

• 首先使用 writable 创建了一个普通存储 count 并初始化为 0。
• 然后通过 derived 创建了派生存储 countSquared，它依赖于 count 存储。每当 count 的值发生变化（$count 获取到 count 当前的值），countSquared 就会重新计算为 $count 的平方值。
• 按钮点击时更新 count 的值，同时 countSquared 会自动更新并显示新的平方值。