Svelte <svelte:options>

最后， <svelte:options>标签允许你指定编译器选项。

我们以 immutable项为例。在本程序中，<Todo> 在接收新数据时会闪烁，点击某一个 done就会更新todos 数据来切换状态， 就算其他 <Todo> 项没有对DOM进行更改，同样会有闪烁效果出现。

我们可以设置<Todo> 组件，让其期望的数据是不可变（immutable） 的。 这意味着我们承诺永远不会对“todo”的属性进行“变更（mutate ）”，而是在内容发生变化时重新创建新的todo对象。

将此代码添加到Todo.svelte 文件内顶部：

<svelte:options immutable={true}/>

您可以根据需要将其简写为 ​<svelte:options immutable/>​ ：

现在，当您通过单击todo来切换状态时，仅被更新的组件会闪烁：

该标签可设置的选项有：

• immutable={true} ：你不能使用可变数据，因此编译器可以通过引用简单的对比检查来确定值是否已更改。
• immutable={false} ：默认值。对于可变对象数据变更，Svelte将其保持不变。
• accessors={true} ：为组件的属性添加getter和setter。
• accessors={false}：默认。
• namespace="..." ：将使用namespace的组件，最常见的是"svg"。
• tag="..." ：指定将此组件编译为自定义标签时使用的名称。

有关这些选项的更多信息，请查阅 API reference 。

示例代码

• App.svelte

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

<h2>Todos</h2>
{#each todos as todo}
	<Todo {todo} on:click={() => toggle(todo)}/>
{/each}

• Todo.svelte

<svelte:options immutable={true}/>

<script>
	import { afterUpdate } from 'svelte';
	import flash from './flash.js';

	export let todo;

	let div;

	afterUpdate(() => {
		flash(div);
	});
</script>

<style>
	div {
		cursor: pointer;
		line-height: 1.5;
	}
</style>

<!-- the text will flash red whenever
     the `todo` object changes -->
<div bind:this={div} on:click>
	{todo.done ? '👍': ''} {todo.text}
</div>

• flash.js

export default function flash(element) {
	requestAnimationFrame(() => {
		element.style.transition = 'none';
		element.style.color = 'rgba(255,62,0,1)';
		element.style.backgroundColor = 'rgba(255,62,0,0.2)';

		setTimeout(() => {
			element.style.transition = 'color 1s, background 1s';
			element.style.color = '';
			element.style.backgroundColor = '';
		});
	});
}