面试题：Svelte中writable store的基本使用

创建writable store：在Svelte中，使用writable函数来创建一个可写的store。writable函数来自'svelte/store'模块。示例代码如下：
```
import { writable } from'svelte/store';

// 创建一个名为count的writable store，初始值为0
const count = writable(0);
```

在组件中订阅store的值：在组件中，可以使用$前缀来订阅store的值。例如：

<script>
    import { writable } from'svelte/store';
    const count = writable(0);
</script>

<p>The count is: {$count}</p>

也可以使用subscribe方法来手动订阅，这种方式更灵活，比如可以在订阅时添加取消订阅的逻辑：

<script>
    import { writable } from'svelte/store';
    const count = writable(0);
    let unsubscribe;
    let value;
    $: unsubscribe = count.subscribe((val) => {
        value = val;
    });
    // 当组件销毁时，取消订阅
    $: onDestroy(() => {
        unsubscribe();
    });
</script>

<p>The count is: {value}</p>

更新store的值：有两种常见的方式更新store的值。

使用set方法：

<script>
    import { writable } from'svelte/store';
    const count = writable(0);
    function increment() {
        count.set($count + 1);
    }
</script>

<button on:click={increment}>Increment</button>
<p>The count is: {$count}</p>

使用update方法，update方法接受一个函数，该函数以当前store的值作为参数，并返回新的值：

<script>
    import { writable } from'svelte/store';
    const count = writable(0);
    function increment() {
        count.update((n) => n + 1);
    }
</script>

<button on:click={increment}>Increment</button>
<p>The count is: {$count}</p>

组件对store值更新的响应：当store的值更新时，Svelte会自动检测到变化，并重新渲染使用了该store值的部分组件。在使用$前缀订阅store值的情况下，Svelte会跟踪依赖关系，当store值变化时，依赖于该值的模板部分会被重新渲染。例如，在<p>The count is: {$count}</p>中，当count store的值改变时，<p>标签内的文本会自动更新，从而实现组件的响应式更新。如果是通过subscribe手动订阅并处理值，当值变化时，传递给subscribe的回调函数会被调用，在回调函数中更新的任何数据如果在模板中使用，也会触发相关部分的重新渲染。

星途面试题库

面试题：Svelte中writable store的基本使用

知识考点

面试题答案