Svelte 自動訂閱

前面的例子中的應(yīng)用程序可以工作，但有一個微妙的錯誤--?unsubscribe?函數(shù)從未被調(diào)用。如果該組件被多次實例化和銷毀，這將導(dǎo)致內(nèi)存泄漏。

修復(fù)它的一種方法是使用 ?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>

不過，它開始變得有點樣板化，尤其是當(dāng)您的組件訂閱了多個 ?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>

自動訂閱僅適用于在組件的頂級范圍內(nèi)聲明（或?qū)耄┑拇鎯ψ兞俊?/p>

您也不限于在標(biāo)記內(nèi)使用 ?$count? — 您也可以在 ?<script>? 的任何地方使用它，例如在事件處理程序或響應(yīng)式聲明中。

任何以 ?$? 開頭的名稱都被假定為引用 store 值。它實際上是一個保留字符——Svelte 會阻止您使用 ?$? 前綴聲明自己的變量。