关于 Svelte 基础以及 Reactivity, Props 和 Logic

关于学习 [[Svelte]] Tutorial 的简要笔记。

Introduction

Svelte 组件通过 .svelte 文件后缀表示，一个组件可以包含三个部分: script(脚本), styles(样式) 和 markup(HTML)，三个部分都不是必须。

如果想在 [[HTML]] 中使用变量，可以花括号 {} 包裹变量名实现:

1
<script lang="ts">
2
  let name = "immwind"
3
  let src = "image.gif"
4
</script>
5

6
<h1>Hello {name}!</h1>

调用 [[JavaScript]] 的内置对象也同样如此，比如使用 [[toUpperCase]] 方法:

1
<h1>Hello {name.toUpperCase()}!</h1>

还有元素属性也支持：

1
<img src={src} alt="image" />

另外在属性名和值相同的情况下，可以使用简写的方式省略属性名：

1
<img {src} alt="image" />

样式

和在 HTML 中一样在组件中添加 style 标签添加样式（仅在当前组件生效）:

1
<p>This is a paragraph.</p>
2

3
<style>
4
  p {
5
    color: goldenrod;
6
    font-family: "Comic Sans MS", cursive;
7
    font-size: 2em;
8
  }
9
</style>

组件

组件可以通过 import name from . 的形式导入，然后使用 <name /> 的形式调用：

1
<script lang="ts">
2
  import Nested from './Nested.svelte'
3
</script>
4

5
<p>This is a paragraph.</p>
6
<Nested />
7

8
<style>
9
p {
10
  color: goldenrod;
11
  font-family: 'Comic Sans MS', cursive;
12
  font-size: 2em;
13
}
14
</style>

另外组件名称建议首字母大写，以和 HTML 元素区分。

插入 HTML

通过 [[{@html…}]] 标记可以插入 HTML 语句:

1
<script>
2
  let string = `this string contains some <strong>HTML!!!</strong>`;
3
</script>
4

5
<p>{string}</p> // this string contains some <strong>HTML!!!</strong>
6
<p>{@html string}</p> // this string contains some HTML!!!

注：确保 @html 中的字符串是安全的，否则可能会导致 XSS 攻击。

Reactivity

如果希望在 js 文件中使用响应式的方法，可以在文件名中加上 .svelte 后缀，然后通过 import 导入，比如把 utils.js 改成 utils.svelte.js，然后通过 import 导入。

$state

[[$state(…)]] 是 Svelte 中的 rune，当状态值改变时，会自动更新视图:

1
<script>
2
  let count = $state(0);
3

4
  function increment() {
5
    count += 1
6
  }
7
</script>
8

9
<button onclick={increment}>
10
  Clicked {count} times.
11
</button>

深度响应，可以响应值的更新，比如下面例子中是通过 push 方法更新数组，同样会触发响应更新:

1
<script>
2
  let numbers = $state([1, 2, 3, 4]);
3

4
  function addNumber() {
5
    numbers.push(numbers.length + 1)
6
 }
7
</script>
8

9
<p>{numbers.join(' + ')} = ...</p>
10

11
<button onclick={addNumber}>
12
  Add a number
13
</button>

$derived

[[$derived(…)]] 从其他状态中派生状态，只读；当依赖的状态值改变时，会自动更新派生状态值:

1
<script>
2
  let numbers = $state([1, 2, 3, 4]);
3
  let total = $derived(numbers.reduce((t, n) => t + n, 2))
4

5
  function addNumber() {
6
    numbers.push(numbers.length + 1);
7
  }
8
</script>
9

10
<p>{numbers.join(' + ')} = {total}</p>
11

12
<button onclick={addNumber}>
13
  Add a number
14
</button>

在上面的例子中，当 numbers 更新时，total 会同样会自动更新。

$inspect

[[$inspect(…)]] 可以实时打印出状态值的变更，仅在开发环境有效，生产环境不会有任何操作：

1
<script>
2
  let count = $state(0);
3
</script>
4

5
<button onclick={() => count += 1}>
6
  Clicked {count} times.
7
</button>
8

9
<p>count: {$inspect(count)}</p>

在开发时如果需要用到 console.log 打印变量，可以尝试使用 $inspect 代替，还支持通过 .with(fn) 的方式追踪变化是从哪里开始的：

1
$inspect(numbers).with(console.trace);

$effect

和 $inspect 类似，[[$effect(…)]] 可以监听状态值的变更，但是不同的是 $effect 还支持对变化进行响应：

1
<script lang="ts">
2
  let count = $state(0);
3

4
  $effect(() => {
5
    console.log(count);  // 打印日志
6
    document.title = `计数: ${count}`;  // 比如修改DOM
7
  });
8
</script>
9

10
<button onclick={() => count += 1}>
11
  Click Add {count}
12
</button>

在上面的例子中，当 count 更新时，会自动调用 $effect 中的回调函数，打印日志和修改 DOM。

Props

在组件中传递数据，可以使用 [[$props(…)]] rune 接收属性，比如下面是接收 anser 属性:

1
<script>
2
  let { answer } = $props();
3
</script>
4

5
<p>The answer is {answer}</p>

在引用的一方传递对应属性的值:

1
<script>
2
 import Nested from './Nested.svelte';
3
</script>
4

5
<Nested answer={42} />

设置默认值:

1
<script>
2
  let { answer = "a mystery" } = $props();
3
</script>

设置后如果没有传递值，则使用默认值:

1
<Nested answer={42} />
2
<Nested answer />

同样也可以设置多个属性:

1
<script>
2
  let { name, version, description, website } = $props();
3
</script>

有多个属性的情况下，传递值时可以直接展开:

1
<script>
2
  import PackageInfo from './PackageInfo.svelte';
3

4
  const pkg = {
5
    name: 'svelte',
6
    version: 5,
7
    description: 'blazing fast',
8
    website: 'https://svelte.dev'
9
  };
10
</script>
11

12
<PackageInfo {...pkg} />

或者是通过解构的方式:

1
<script>
2
  let stuff = $props();
3
</script>

然后通过 stuff.name 方式调用。

Logic

{#...}: 开启块
{:...}: 继续块
{/...}: 关闭块

if

[[if]] 条件语句。

if:

1
{#if count > 10 }
2
  <p>{count} is greater than 10</p>
3
{/if}

if..else:

1
{#if count > 10}
2
  <p>{count} is greater than 10</p>
3
{:else}
4
  <p>{count} is between 0 and 10</p>
5
{/if}

else if:

1
{#if count > 10}
2
  <p>{count} is greater than 10</p>
3
{:else if count < 5}
4
  <p>{count} is less than 5</p>
5
{:else}
6
  <p>{count} is between 0 and 10</p>
7
{/if}

each

通过 [[{]] 可以在模板中遍历数组，以减少重复代码:

1
<script>
2
  const colors = ['red', 'orange', 'yellow', 'green'];
3
  let selected = $state(colors[0]);
4
</script>
5

6
<h1 style="color: {selected}">Pick a colour}</h1>
7

8
<div>
9
  {#each colors as color, i}
10
    <button
11
      style="background: {color}"
12
      aria-label={color}
13
      aria-current={selected === color}
14
      onclick={() => {
15
        selected = color;
16
      }}
17
    >{i + 1}</button>
18
  {/each}
19
</div>

可以为 each 每次迭代指定一个唯一的键:

1
<script>
2
  import Thing from './Thing.svelte';
3

4
  let things = $state([
5
    { id: 1, name: 'apple' },
6
    { id: 2, name: 'banana' },
7
    { id: 3, name: 'carrot' },
8
    { id: 4, name: 'doughnut' },
9
    { id: 5, name: 'egg' }
10
  ]);
11
</script>
12

13
<button onclick={() => things.shift()}>
14
  Remove first thing
15
</button>
16

17
{#each things as thing (thing.id)}
18
  <Thing name={thing.name} />
19
{/each}

wait

语法: #await… :then… :catch… /await

当需要 [[{]] 等待异步操作完成时，可以使用 #await 语句:

1
<script>
2
  import { roll } from './utils.js';
3

4
  let promise = $state(roll());
5
</script>
6

7
<button onclick={() => promise = roll()}>
8
  roll the dice
9
</button>
10

11
{#await promise}
12
  <p>...rolling</p>
13
{:then number}
14
  <p>you rolled a {number}!</p>
15
{:catch error}
16
  <p style="color: red">{error.message}</p>
17
{/await}

await 和 catch 都可以省略:

1
{#await promise then number}
2
  <p>you rolled a {number}!</p>
3
{/await}

参考

Introduction / Welcome to Svelte • Svelte Tutorial
Overview • Docs • Svelte
Illustration by Nigel Hoare