Svelte 附带几个反应类,你可以用它们代替 JavaScript 内置对象 — 即 Map
、Set
、Date
、URL
和 URLSearchParams
。
¥Svelte ships with several reactive classes that you can use in place of JavaScript built-in objects — namely Map
, Set
, Date
, URL
and URLSearchParams
.
在这个练习中,我们可以使用 $state(new Date())
声明 date
,并在 setInterval
中重新分配它。但更好的替代方案是从 svelte/reactivity
使用 SvelteDate
:
¥In this exercise, we could declare date
using $state(new Date())
and reassign it inside the setInterval
. But a nicer alternative is to use SvelteDate
from svelte/reactivity
:
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>
上一页 下一页
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>