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 => {
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 会阻止您使用 $ 前缀声明自己的变量。