<svelte:options> 要素はコンパイラのオプションを指定することができます。
例として immutable オプションを使用します。このアプリでは、新しいデータを受け取るたびに <Todo> コンポーネントが点滅します。アイテムの1つをクリックすると、更新された todos 配列が作成され、done 状態が切り替わります。これにより、他の <Todo> アイテムも点滅しますが、DOM は変更されません。
これを最適化するには、<Todo> コンポーネントに immutable データを期待するように指示します。これは、todo プロパティを 変更 しないことを約束していることを意味します。
これを Todo.svelte の先頭に追加します。
Todo.svelte
<svelte:options immutable={true} />お好みであれば、これを
<svelte:options immutable/>と短くしても構いません。
これで、Todos をクリックして切り替えると、更新されたコンポーネントだけが点滅するようになりました。
ここで設定できるオプションは
immutable={true}— 変更可能なデータは使用できません、コンパイラは値が変更されたかどうかを判断するために単純な参照等価性チェックを行うことができますimmutable={false}— デフォルトです。Svelteは、変更可能なオブジェクトが変更されたかどうかについて、より保守的になりますaccessors={true}— コンポーネントのプロパティ(props)のゲッターとセッターを追加しますaccessors={false}— デフォルトの値ですnamespace="..."— このコンポーネントが使用される名前空間。最も一般的なものは"svg"ですcustomElement="..."— このコンポーネントをカスタム要素としてコンパイルする際に使用する名前です
これらのオプションの詳細については、API リファレンスを参照してください。
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>