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