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