Svelte基础
Svelte高阶
上下文API
特殊元素
接下来
SvelteKit基础
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
贴心的Svelte还提供了些响应式类(reactive classes), 对应JavaScript中的相应类:Map
, Set
, Date
, URL
, URLSearchParams
.
比如我们可能会使用$state(new Date())
声明一个date
变量,并在setInterval
中重新赋值。还可以使用svelte/reactivity
提供的SvelteDate
:
Svelte ships with several reactive classes that you can use in place of JavaScript built-in objects — namely
Map
,Set
,Date
,URL
andURLSearchParams
. In this exercise, we could declaredate
using$state(new Date())
and reassign it inside thesetInterval
. But a nicer alternative is to useSvelteDate
fromsvelte/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>
previous next
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>