Svelte <svelte:options>

2023-02-22 16:17 更新

最后, <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 = '';
		});
	});
}


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号