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が計算されます。

複数のステートメントをブロックに入れることで組み合わせることができます

$: {
	// 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