响应式进阶 / 响应式类 • Svelte Tutorial

Svelte高阶响应式进阶响应式类

不但可以把变量变成响应式的，强大的Svelte还可以把类的属性变成响应式的哦，小主! 快夸我!💕 比如把Box类的width和height属性变成响应式的:

It’s not just variables that can be made reactive — in Svelte, we can also make properties of classes reactive. Let’s make the width and height properties of our Box class reactive:

App

class Box {
	width = $state(0);
	height = $state(0);
	area = 0;

	// ...
}

现在可以操作区间输入框或embiggen(变大)按钮，看下Box(盒子)的变化。另外$derived也可以作用在类的属性上哦，来把box.area（盒子面积）也变成响应式的:

Now, when we interact with the range inputs or click the ‘embiggen’ button, the box reacts. We can also use $derived, so that box.area updates reactively:

App

class Box {
	width = $state(0);
	height = $state(0);
	area = $derived(this.width * this.height);

	// ...
}

除了$state和$derived还有$state.raw和$derived.by也可以作用到类的属性上哦.

In addition to $state and $derived, you can use $state.raw and $derived.by to define reactive fields.

Edit this page on GitHub

previous next

Raw状态 Getters和setters

<script>

	const MAX_SIZE = 200;

	class Box {

		width = 0;

		height = 0;

		area = 0;

		constructor(width, height) {

			this.width = width;

			this.height = height;

		embiggen(amount) {

			this.width += amount;

			this.height += amount;

	const box = new Box(100, 100);

</script>

<label>

	<input type="range" bind:value={box.width} min={0} max={MAX_SIZE} />

	{box.width}

</label>

<label>

	<input type="range" bind:value={box.height} min={0} max={MAX_SIZE} />

	{box.height}

</label>

<button onclick={() => box.embiggen(10)}>embiggen</button>

<hr>

<div

	class="box"

	style:width="{box.width}px"

	style:height="{box.height}px"

	{box.area}

</div>

<style>

	label {

		display: flex;

		align-items: center;

	hr {

		margin: 1em 0;

		border: none;

		border-bottom: 1px solid #888;

	.box {

		background: radial-gradient(at 25% 25%, hsl(15 100 60), hsl(15 100 50)) ;

		border-radius: 2px;

		filter: drop-shadow(0 0 10px hsl(15 100 50 / 0.3));

		display: flex;

		align-items: center;

		justify-content: center;

		overflow: hidden;

</style>

show text show editor