Svelte旧版 API

响应式 $: 语句

在符文模式下，对状态更新的反应由 $derived 和 $effect 符文处理。

在旧版模式下，任何顶级语句（即不在块或函数内部）都可以通过在前面加上 $: 标签来使其具有反应性。这些语句在 <script> 中的其他代码之后以及组件标记渲染之前运行，然后在它们所依赖的值发生变化时运行。

<script>
	let a = 1;
	let b = 2;

	// this is a 'reactive statement', and it will re-run
	// when `a`, `b` or `sum` change
	$: console.log(`${a} + ${b} = ${sum}`);

	// this is a 'reactive assignment' — `sum` will be
	// recalculated when `a` or `b` change. It is
	// not necessary to declare `sum` separately
	$: sum = a + b;
</script>

语句根据其依赖项及其赋值以拓扑顺序排序：由于 console.log 语句依赖于 sum，因此即使 sum 后来出现，也会先计算 sum。

可以通过将多个语句放在一个块中来组合它们

$: {
	// recalculate `total` when `items` changes
	total = 0;

	for (const const item: anyitem of items) {
		total += const item: anyitem.value;
	}
}

响应式赋值的左侧可以是标识符，也可以是解构赋值

$: ({ larry: anylarry, moe: anymoe, curly: anycurly } = stooges);

理解依赖关系

$: 语句的依赖关系是在编译时确定的——它们是在语句内部引用的（但未赋值给）的任何变量。

换句话说，这样的语句在 count 发生变化时不会重新运行，因为编译器无法“看到”依赖关系

let let count: numbercount = 0;
let let double: () => numberdouble = () => let count: numbercount * 2;

$: doubled = let double: () => numberdouble();

类似地，如果依赖关系被间接引用，拓扑排序将失败：z 永远不会更新，因为当更新发生时，y 不被认为是“脏的”。将 $: z = y 移动到 $: setY(x) 下方可以解决此问题

<script>
	let x = 0;
	let y = 0;

	$: z = y;
	$: setY(x);

	function setY(value) {
		y = value;
	}
</script>

仅限浏览器代码

响应式语句在服务器端渲染以及浏览器中运行。这意味着任何仅应在浏览器中运行的代码都必须包装在 if 块中

$: if (browser) {
	var document: DocumentMDN Reference
document.Document.title: stringContains the title of the document.
MDN Reference
title = title;
}

在 GitHub 上编辑此页面

响应式 let/var 声明 export let