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