· Svelte自动订阅_Svelte

Svelte 自动订阅

前面的例子中的应用程序可以工作，但有一个微妙的错误--unsubscribe函数从未被调用。如果该组件被多次实例化和销毁，这将导致内存泄漏。修复它的一种方法是使用 onDestroy 生命周期钩子：<script>

import { onDestroy } from 'svelte';

import { count } from './stores.js';

import Incrementer from './Incrementer.svelte';

import Decrementer from './Decrementer.svelte';

import Resetter from './Resetter.svelte';

let count_value;
const unsubscribe = count.subscribe(value =&gt; {
    count_value = value;
});
onDestroy(unsubscribe);

</script>

<h1>The count is {count_value}</h1>不过，它开始变得有点样板化，尤其是当您的组件订阅了多个 stores 时。相反，Svelte 有一个小窍门——你可以通过在 store名称前加上 $ 来引用 store值：<script>

import { count } from './stores.js';

import Incrementer from './Incrementer.svelte';

import Decrementer from './Decrementer.svelte';

import Resetter from './Resetter.svelte';

</script>

<h1>The count is {$count}</h1>自动订阅仅适用于在组件的顶级范围内声明（或导入）的存储变量。您也不限于在标记内使用 $count — 您也可以在 <script> 的任何地方使用它，例如在事件处理程序或响应式声明中。任何以 $ 开头的名称都被假定为引用 store 值。它实际上是一个保留字符——Svelte 会阻止您使用 $ 前缀声明自己的变量。