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