Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

Svelte 附带几个反应类,你可以用它们代替 JavaScript 内置对象 — 即 MapSetDateURLURLSearchParams

¥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>