Advanced reactivity / Reactive built-ins • Svelte Tutorial

Advanced Svelte Advanced reactivity Reactive built-ins

Svelte には、JavaScript 組み込みオブジェクトの代わりに使用できるいくつかのリアクティブクラス (Map、Set、Date、URL、URLSearchParams) が付属しています。

この演習では、$state(new Date()) を使用して date を宣言し、setInterval 内で再割り当てします。ただし、より適切な代替案は、svelte/reactivity の SvelteDate を使用することです。

App

<script>
	import { SvelteDate } from 'svelte/reactivity';

	let date = new SvelteDate();

	// ...
</script>

<script lang="ts">
	import { SvelteDate } from 'svelte/reactivity';

	let date = new SvelteDate();

	// ...
</script>

previous next

<script>

	let date = new Date();

	const pad = (n) => n < 10 ? '0' + n : n;

	$effect(() => {

		const interval = setInterval(() => {

			date.setTime(Date.now());

		}, 1000);

		return () => {

			clearInterval(interval);

};

});

</script>

<p>The time is {date.getHours()}:{pad(date.getMinutes())}:{pad(date.getSeconds())}</p>

show text show editor