Svelteには、JavaScriptのビルトインオブジェクト（Map、Set、Date、URL、URLSearchParamsなど）の代わりに使用できるいくつかのリアクティブクラスが用意されています。
この演習では、dateを$state(new Date())を使用して宣言し、setInterval内で再代入することもできます。しかし、より良い代替案は、svelte/reactivityからSvelteDateを使用することです。
アプリ
<script>
import { SvelteDate } from 'svelte/reactivity';
let date = new SvelteDate();
// ...
</script>前へ 次へ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>