Svelte特殊標籤（Special tags）和指令的概念和使用詳解

在Svelte中，除了常規的HTML標籤和組件標籤外，還有一些特殊的標籤（Special tags）和指令，它們提供了額外的功能和能力，用於處理頭部、組件動態加載、全局事件監聽等。本文將詳細介紹Svelte中常見的特殊標籤和指令及其用法。

<svelte:head>

<svelte:head>標籤用於在組件中動態修改文檔的頭部信息，比如標題（<title>）、元標記（<meta>）等。在Svelte組件中只能有一個<svelte:head>標籤，它通常與Svelte生命周期鉤子一起使用。

示例代碼

1
<script>
2
  import { onMount } from "svelte";
3


4
  onMount(() => {
5
    document.querySelector("title").innerText = "Dynamic Title";
6
  });
7
</script>
8


9
<svelte:head>
10
  <title>Hello Svelte!</title>
11
  <meta
12
    name="description"
13
    content="This is a demo of using Svelte's special tags and directives."
14
  />
15
</svelte:head>

在這個示例中，<svelte:head>標籤用於設置文檔的標題和描述信息。在onMount生命周期鉤子中，我們動態修改了文檔的標題。

<svelte:component>

<svelte:component>標籤用於動態加載和渲染Svelte組件。它允許我們在運行時選擇性地加載不同的組件，從而實現組件的動態切換。

示例代碼

1
<script>
2
  import FirstComponent from "./FirstComponent.svelte";
3
  import SecondComponent from "./SecondComponent.svelte";
4


5
  let showFirst = true;
6


7
  function toggleComponent() {
8
    showFirst = !showFirst;
9
  }
10
</script>
11


12
<button on:click={toggleComponent}>Toggle Component</button>
13


14
<svelte:component this={showFirst ? FirstComponent : SecondComponent} />

在這個示例中，根據showFirst的值，動態渲染FirstComponent或SecondComponent。

<svelte:window>

<svelte:window>標籤用於在組件中監聽和處理全局窗口事件，比如resize、scroll等事件。

示例代碼

1
<script>
2
  function handleResize() {
3
    console.log("Window resized!");
4
  }
5
</script>
6


7
<svelte:window on:resize={handleResize} />

在這個示例中，當窗口大小發生變化時，會觸發handleResize函數。

<svelte:body>

<svelte:body>標籤用於在組件中動態修改文檔的主體部分（<body>標籤），可以用於動態添加全局樣式或JavaScript。

示例代碼

1
<svelte:body>
2
  <script>
3
    console.log('This script will be inserted into the document body.');
4
  </script>
5
</svelte:body>

在這個示例中，<script>標籤中的代碼將被插入到文檔的<body>標籤內。

<svelte:self>

<svelte:self>標籤用於在組件內部遞歸引用自身，實現組件的遞歸結構。

示例代碼

1
<script>
2
  let count = 0;
3


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


9
<button on:click={increment}>Increment</button>
10


11
{#if count < 5}
12
  <svelte:self />
13
{/if}
14


15
<p>Count: {count}</p>

在這個示例中，通過遞歸地引用自身，實現了一個簡單的計數器，直到計數器值小於5時停止遞歸。

指令：@html, @const, @debug

除了特殊標籤外，Svelte還提供了一些實用的指令，用於控制渲染行為、優化性能等。

@html指令

@html指令用於渲染包含HTML代碼的字符串，可以繞過Svelte的默認HTML轉義，直接將字符串作為HTML插入到文檔中。

示例代碼

1
<script>
2
  let htmlContent = "<strong>Hello Svelte!</strong>";
3
</script>
4


5
{@html htmlContent}

在這個示例中，htmlContent中的內容會被作為HTML插入到文檔中，顯示為加粗的”Hello Svelte!”。

@const指令

@const指令用於聲明常量，可以幫助Svelte在編譯時優化，減少運行時的計算開銷。

示例代碼

1
<script>
2
  export let boxes;
3
</script>
4


5
{#each boxes as box}
6
  {@const area = box.width * box.height}
7
  {box.width} * {box.height} = {area}
8
{/each}

在這個示例中，@const定義了一個局部常量，{@const}僅允許作為{#if}、{:else if}、{:else}、{#each}、{:then}、{:catch}、<Component />、<svelte:fragment />的直接子項。

@debug指令

@debug指令用於調試和輸出變量的值到控制台，通常用於開發過程中調試代碼。

示例代碼

1
<script>
2
  let user = {
3
    firstname: 'Ada',
4
    lastname: 'Lovelace'
5
  };
6
</script>
7


8
<!-- 編譯 -->
9
{@debug user}
10
{@debug user1, user2, user3}
11


12
<!-- 不會編譯 -->
13
{@debug user.firstname}
14
{@debug myArray[0]}
15
{@debug !isReady}
16
{@debug typeof user === 'object'}
17


18
<h1>Hello {user.firstname}!</h1>

{@debug ...}標籤提供了 console.log(...) 的替代方案。當特定變量的值發生變化時，它會記錄它們，並在打開開發工具時暫停代碼執行。

{@debug ...}接受以逗號分隔的變量名稱列表（不是任意表達式）。

總結

通過本文的介紹，我們了解了Svelte中常見的特殊標籤和指令的概念和使用方法。這些特殊標籤和指令為Svelte提供了更多靈活性和功能，使得在開發過程中能夠更好地處理動態內容、全局事件、組件遞歸以及優化渲染行為等場景。

相似的文章

Svelte簡單入門指南：從項目搭建到組件交互與路由配置

Svelte簡單入門指南：從項目搭建到組件交互與路由配置

在Svelte中監聽導出屬性的變化