Skip to main content

<svelte:options> 元素允许你指定编译器选项。

我们这里选择 immutable 选项举例。在本例中，每当 <Todo> 组件接收到新数据时都会闪一下。单击任意一个元素的复选框都会变更 done 的状态，从而导致 todos 数组发生更新。这样会导致 其他 <Todo> 组件也发生闪动，尽管它们的 DOM 并没有发生任何变动。

我们可以通过告知 <Todo> 组件接收 不可变 数据来优化这点。这个的意思是，我们保证永远不会 变动 todo 这个属性，而是在每次发生变动的时候创建新的 todo 对象。

将这行添加到 Todo.svelte 顶端：

Todo.svelte
<svelte:options immutable={true} />

如果你喜欢，也可以把这行简写作 <svelte:options immutable/>。

现在，当你点击复选框时，只有被更新的组件会闪动了。

可以被设定的选项如下：

  • immutable={true} — 你永远不会使用可变的数据，因此编译器通过简单的引用对等检查来判断值是否发生变化
  • immutable={false} — 默认。Svelte 对于可变对象是否发生改变的检查会更保守谨慎一些
  • accessors={true} — 给组件的属性（props）添加 getter 和 setter
  • accessors={false} — 默认
  • namespace="..." — 该组件被使用的命名空间，通常是 "svg"
  • customElement="..." — 将该组件编译为自定义元素时使用的名称

查看 API 参考 获取更多关于这些选项的信息。

Next: <svelte:fragment>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
	import Todo from './Todo.svelte';
 
	let todos = [
		{ id: 1, done: true, text: 'wash the car' },
		{ id: 2, done: false, text: 'take the dog for a walk' },
		{ id: 3, done: false, text: 'mow the lawn' }
	];
 
	function toggle(toggled) {
		todos = todos.map((todo) => {
			if (todo === toggled) {
				// return a new object
				return {
					id: todo.id,
					text: todo.text,
					done: !todo.done
				};
			}
 
			// return the same object
			return todo;
		});
	}
</script>
 
<div class="centered">
	<h1>todos</h1>
 
	<ul class="todos">
		{#each todos as todo (todo.id)}
			<Todo {todo} on:change={() => toggle(todo)} />
		{/each}
	</ul>
</div>
 
<style>
	.centered {
		max-width: 20em;
		margin: 0 auto;
	}
</style>
initialising