78 篇文章 含有標籤「frontend」

1. HTTP/2 簡介​

HTTP/2 是 HTTP/1.1 的後繼版本，由 IETF HTTP 工作小組開發，並於 2015 年 5 月成為正式標準（RFC 7540）。HTTP/2 的主要目標是提高 Web 的性能，減少延遲，並優化資源的傳輸方式。

2. HTTP/2 的核心特性​

2.1 二進制分幀層（Binary Framing Layer）​

HTTP/2 以二進制格式進行數據傳輸，而非 HTTP/1.1 的純文字格式。這使得解析和處理更高效，減少了協議的開銷。

2.2 多路徑傳輸（Multiplexing）​

在 HTTP/1.1 中，一個 TCP 連線同時只能處理一個請求，導致「線頭阻塞」問題。HTTP/2 允許在單個 TCP 連線中並行傳輸多個請求與回應，顯著提高效率。

2.3 流量控制與優先權（Stream Prioritization）​

HTTP/2 允許客戶端為請求設定優先級，讓重要的資源（如 CSS、JS）優先傳輸，提高頁面載入速度。

2.4 頭部壓縮（Header Compression）​

HTTP/2 使用 HPACK 壓縮技術來減少 HTTP 標頭的大小，避免 HTTP/1.1 中重複傳輸 Cookie、User-Agent 等大量標頭資訊的問題。

2.5 伺服器推送（Server Push）​

伺服器可以主動推送客戶端尚未請求的資源，例如 HTML 請求回應時，伺服器可同時推送 CSS、JavaScript 檔案，減少額外的請求時間。

3. HTTP/2 與 HTTP/1.1 的比較​

4. HTTP/2 的使用與設定​

4.1 瀏覽器支援​

現代主流瀏覽器（Chrome、Firefox、Edge、Safari）皆支援 HTTP/2，但通常需要搭配 HTTPS 使用。

4.2 伺服器支援​

常見的 Web 伺服器如 Nginx、Apache、LiteSpeed 都已支援 HTTP/2，但需進行適當的設定。

4.2.1 在 Nginx 啟用 HTTP/2​

若要在 Nginx 中啟用 HTTP/2，需要確保已安裝支援 HTTP/2 的 Nginx 版本（1.9.5 以上）並修改設定檔：

server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/nginx/ssl/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/cert.key;

    location / {
        root /var/www/html;
        index index.html;
    }
}

在 listen 指令中加入 http2 即可啟用 HTTP/2。

4.2.2 在 Apache 啟用 HTTP/2​

Apache 2.4.17 以上版本支援 HTTP/2，需要啟用 mod_http2 模組。

a2enmod http2
systemctl restart apache2

接著，在 VirtualHost 設定中加入：

<VirtualHost *:443>
    Protocols h2 http/1.1
    DocumentRoot /var/www/html
    ServerName example.com
</VirtualHost>

5. HTTP/2 客戶端測試​

可以使用 curl 測試 HTTP/2 是否正常運作：

curl -I --http2 https://example.com

若顯示 HTTP/2 200，則表示伺服器已成功支援 HTTP/2。

6. HTTP/2 的實際應用​

6.1 使用 HTTP/2 Server Push​

在 HTTP/2 中，可以使用 Link 標頭來主動推送資源。例如，在 Nginx 配置中加入：

location / {
    add_header Link "</style.css>; rel=preload; as=style";
    add_header Link "</script.js>; rel=preload; as=script";
}

這樣當客戶端請求 index.html 時，伺服器會自動推送 style.css 和 script.js，減少 HTTP 請求數量。

6.2 透過瀏覽器 DevTools 觀察 HTTP/2​

打開 Chrome 開發者工具（F12） → Network 分頁，查看 Protocol 欄位，若顯示 h2，則表示該請求使用了 HTTP/2。

7. 總結​

HTTP/2 改進了 HTTP/1.1 的多項限制，透過多路徑傳輸、頭部壓縮與伺服器推送提高了 Web 效能。現代瀏覽器與伺服器已廣泛支援 HTTP/2，建議在新專案中啟用 HTTP/2，以提升用戶體驗與網站速度。

前言​

CSS transition 屬性允許元素在狀態變化時產生平滑的動畫效果，使 UI 更加流暢和自然。這項技術通常應用於按鈕、圖片、卡片等 UI 元素的互動效果，如懸停、點擊或狀態變更。

1. transition 基礎概念​

CSS transition 屬性用於定義當元素的某些 CSS 屬性發生變化時，該變化應如何逐漸呈現，而非立即改變。基本語法如下：

transition: property duration timing-function delay;

• property：指定要應用過渡效果的 CSS 屬性。
• duration：設定過渡動畫的時間（如 0.5s、200ms）。
• timing-function：定義動畫的速度曲線（如 ease、linear）。
• delay：動畫開始前的延遲時間（可選，默認為 0s）。

2. transition 常見應用​

2.1 過渡單一屬性​

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
}

當滑鼠懸停在 .button 上時，背景顏色將在 0.3s 內從 blue 變為 darkblue。

2.2 過渡多個屬性​

.card {
    width: 200px;
    height: 300px;
    background-color: lightgray;
    transform: scale(1);
    transition: background-color 0.3s ease, transform 0.5s ease-in-out;
}

.card:hover {
    background-color: gray;
    transform: scale(1.1);
}

當滑鼠懸停時，.card 的背景顏色會變深，並且整個卡片會放大 1.1 倍。

3. transition 進階應用​

3.1 transition-timing-function（動畫速度曲線）​

timing-function 用於定義動畫的速度變化方式，常見的值如下：

• linear：等速變化。
• ease（預設值）：開始與結束較慢，中間較快。
• ease-in：開始較慢，之後加速。
• ease-out：開始較快，最後減速。
• ease-in-out：開始和結束都較慢。

範例：

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: transform 1s ease-in-out;
}

.box:hover {
    transform: translateX(200px);
}

當滑鼠懸停時，.box 會平滑地向右移動 200px，並且動畫在開始和結束時較慢。

3.2 transition-delay（延遲時間）​

可以設定 transition-delay 來延遲動畫的開始時間。

.box {
    width: 100px;
    height: 100px;
    background-color: green;
    transition: background-color 0.5s ease-in 1s;
}

.box:hover {
    background-color: darkgreen;
}

當滑鼠懸停時，background-color 會延遲 1s 後才開始變化。

4. transition 實際應用範例​

4.1 按鈕的點擊效果​

.button {
    padding: 12px 24px;
    background-color: #ff5733;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-out;
}

.button:active {
    transform: scale(0.95);
}

當按下 .button 時，按鈕會稍微縮小，產生按壓感。

4.2 漸變顯示效果​

.fade-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-box.show {
    opacity: 1;
}

當 .show 類別被添加時，.fade-box 會在 1s 內逐漸顯示。

4.3 圖片放大效果​

.image-container img {
    width: 100px;
    transition: width 0.3s ease-in-out;
}

.image-container:hover img {
    width: 150px;
}

當滑鼠懸停時，圖片會平滑地放大。

5. transition vs animation​

雖然 transition 和 animation 都能用來製作動畫，但它們的用途不同：

• transition：適合用於元素的狀態變更（如 hover、focus）。
• animation：適用於更複雜的動畫，如連續循環的動畫。

如果需要更高級的動畫，例如無限重複、按時間順序變化的動畫，則應使用 @keyframes 和 animation。

6. 總結​

CSS transition 是製作動畫效果最簡單且高效的方法之一。透過 transition，可以讓 UI 更加生動，使使用者體驗更流暢。掌握 transition 的基本語法與進階應用後，可以靈活運用於各種互動效果，如按鈕動畫、圖片過渡、淡入淡出等，讓網頁更加吸引人。

前言​

CSS transform 屬性是一個強大的工具，可以用來對 HTML 元素進行旋轉、縮放、移動及傾斜等變換，而不會影響其他元素的佈局。這使得 transform 非常適合用來建立動畫效果、視覺調整以及 UI 微調。

1. transform 基礎概念​

transform 屬性可以接受一個或多個變換函數，使元素在不影響文檔流的情況下進行變換。這些變換主要包含：

• 平移 (translate)
• 縮放 (scale)
• 旋轉 (rotate)
• 傾斜 (skew)
• 矩陣變換 (matrix)

2. transform 常見屬性​

2.1 平移 (translate)​

translate(x, y) 用於移動元素的 X 軸與 Y 軸位置。

.box {
    transform: translate(50px, 100px);
}

此範例將 .box 元素向右移動 50px，向下移動 100px。

單軸平移​

• translateX(50px)：僅在 X 軸移動 50px。
• translateY(100px)：僅在 Y 軸移動 100px。

2.2 縮放 (scale)​

scale(x, y) 用於縮放元素。

.box {
    transform: scale(1.5, 0.5);
}

此範例將 .box 元素的寬度放大 1.5 倍，高度縮小為原來的一半。

單軸縮放​

• scaleX(2)：寬度變為 2 倍。
• scaleY(0.5)：高度變為 0.5 倍。

2.3 旋轉 (rotate)​

rotate(angle) 用於旋轉元素。

.box {
    transform: rotate(45deg);
}

此範例將 .box 元素順時針旋轉 45 度。

2.4 傾斜 (skew)​

skew(x-angle, y-angle) 用於使元素傾斜。

.box {
    transform: skew(30deg, 10deg);
}

此範例將 .box 在 X 軸方向傾斜 30 度，在 Y 軸方向傾斜 10 度。

單軸傾斜​

• skewX(15deg)：僅在 X 軸傾斜 15 度。
• skewY(25deg)：僅在 Y 軸傾斜 25 度。

2.5 矩陣變換 (matrix)​

matrix(a, b, c, d, e, f) 是一個綜合性變換函數，允許透過 6 個參數來同時應用縮放、旋轉、傾斜與位移。

.box {
    transform: matrix(1, 0.5, 0.5, 1, 50, 100);
}

這樣的矩陣表示：

• 1：X 軸縮放。
• 0.5：X 軸傾斜。
• 0.5：Y 軸傾斜。
• 1：Y 軸縮放。
• 50：X 軸位移。
• 100：Y 軸位移。

3. transform 的應用範例​

3.1 建立簡單的 hover 效果​

利用 transform，可以輕鬆製作滑鼠懸停的動畫效果，例如按鈕放大效果：

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
}

.button:hover {
    transform: scale(1.1);
}

3.2 圖片翻轉效果​

使用 rotateY(180deg) 來製作翻轉效果，常用於卡片翻轉動畫。

.card {
    width: 200px;
    height: 300px;
    background-color: lightgray;
    transform: rotateY(0deg);
    transition: transform 0.5s;
}

.card:hover {
    transform: rotateY(180deg);
}

3.3 旋轉動畫​

結合 @keyframes 和 transform，可以製作無限旋轉動畫。

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
    animation: spin 2s linear infinite;
}

4. transform-origin 的應用​

transform-origin 屬性用於指定變換的基準點，預設值為 50% 50%（元素中心）。

.box {
    transform-origin: top left;
    transform: rotate(45deg);
}

此範例中，元素將以左上角為旋轉點，而非默認的中心點。

5. perspective 與 3D 變換​

當使用 3D 變換（如 rotateX、rotateY）時，可使用 perspective 來模擬景深效果。

.container {
    perspective: 500px;
}

.box {
    transform: rotateY(45deg);
}

此範例讓 .box 具有 3D 透視效果，使其看起來更真實。

6. 總結​

CSS transform 是一個靈活且強大的屬性，可以用來製作動畫、視覺調整及增強 UI 體驗。透過 translate、scale、rotate、skew 等函數，你可以輕鬆地操控元素的外觀，讓你的網頁更具吸引力。

1. 什麼是 HTML？​

HTML（HyperText Markup Language，超文本標記語言）是建立網頁的標準語言。它用標籤（tags）來結構化內容，讓瀏覽器能夠解析並顯示網頁。HTML 主要負責網頁的結構，而樣式與行為則交由 CSS 和 JavaScript 負責。

2. HTML 文件基本結構​

一個基本的 HTML 文件包含以下部分：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個 HTML 頁面</title>
</head>
<body>
    <h1>歡迎來到我的網站</h1>
    <p>這是一個簡單的 HTML 頁面。</p>
</body>
</html>

• <!DOCTYPE html>：宣告 HTML5 文件類型。
• <html lang="zh-TW">：定義 HTML 根標籤，lang="zh-TW" 表示使用繁體中文。
• <head>：包含頁面的元資訊（meta information），如編碼、標題等。
• <meta charset="UTF-8">：設定網頁使用 UTF-8 編碼，確保中文字元正確顯示。
• <meta name="viewport" content="width=device-width, initial-scale=1.0">：讓網頁適應不同裝置的螢幕大小。
• <title>：設定瀏覽器標籤上的標題。
• <body>：放置網頁的主要內容，如標題、段落、圖片等。

3. 常見 HTML 標籤​

3.1 標題與段落​

HTML 提供六種標題 (<h1> 到 <h6>)，以及 <p> 用來表示段落。

<h1>這是主標題</h1>
<h2>這是次標題</h2>
<h3>這是小標題</h3>
<p>這是一段文字，HTML 會自動換行。</p>

3.2 超連結​

使用 <a> 標籤建立超連結：

<a href="https://www.google.com" target="_blank">前往 Google</a>

• href 指定連結網址。
• target="_blank" 讓連結在新視窗開啟。

3.3 圖片​

使用 <img> 來插入圖片：

<img src="image.jpg" alt="示範圖片" width="300">

• src 指定圖片來源。
• alt 提供替代文字。
• width 設定圖片寬度（可用 height 指定高度）。

3.4 清單​

有序清單 (<ol>) 和無序清單 (<ul>)：

<h2>購物清單</h2>
<ul>
    <li>蘋果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

<h2>步驟</h2>
<ol>
    <li>打開電腦</li>
    <li>開啟瀏覽器</li>
    <li>輸入網址</li>
</ol>

3.5 表格​

使用 <table> 來建立表格，並搭配 <tr>（表格列）、<th>（表頭）、<td>（儲存格）：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>25</td>
    </tr>
    <tr>
        <td>小華</td>
        <td>30</td>
    </tr>
</table>

• border="1" 設定表格邊框。

3.6 表單​

使用 <form> 來建立表單：

<form action="submit.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">電子郵件：</label>
    <input type="email" id="email" name="email" required>
    <br>
    <input type="submit" value="提交">
</form>

• action="submit.php" 指定表單提交到 submit.php。
• method="post" 指定使用 POST 方法傳遞數據。
• required 讓輸入欄位變成必填。

4. HTML5 新增標籤​

HTML5 引入了一些語義化標籤，使網頁更具結構性。

<header>
    <h1>網站標題</h1>
</header>
<nav>
    <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">關於我們</a></li>
        <li><a href="#">聯絡我們</a></li>
    </ul>
</nav>
<section>
    <h2>最新消息</h2>
    <p>這是一則最新消息的內容。</p>
</section>
<footer>
    <p>版權所有 &copy; 2025</p>
</footer>

• <header>：頁首。
• <nav>：導覽區塊。
• <section>：內容區塊。
• <footer>：頁尾資訊。

5. HTML 與 CSS 結合​

雖然 HTML 定義了結構，但我們通常使用 CSS 來美化頁面。內嵌 CSS 可以寫在 <style> 內：

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        text-align: center;
    }
    h1 {
        color: #007bff;
    }
    p {
        font-size: 18px;
    }
</style>

或者外部引入 CSS 檔案：

<link rel="stylesheet" href="styles.css">

6. 總結​

這篇教學筆記介紹了 HTML 的基本語法，包括標籤、結構與常見元素。學會這些後，可以進一步學習 CSS 來美化網頁，或是學習 JavaScript 增強互動性。最好的學習方式是透過實際練習與製作小專案來熟悉 HTML 語法。

前言​

在 Python 的日常開發中，decorator（裝飾器） 是一個非常強大的語法工具，常用於增強函式功能，例如：記錄日誌、驗證權限、計時、快取等。在許多框架（如 Flask、Django）或第三方函式庫中，也可以經常看到裝飾器的身影。

然而對初學者來說，decorator 的語法可能一開始比較難以理解，尤其涉及到函式是「第一類物件（first-class object）」、「閉包（closure）」的概念。本篇筆記將循序漸進帶你理解 decorator 的本質與應用方式。

重點摘要​

• Python 函式是第一類物件：可以作為參數傳遞、作為回傳值、賦值給變數。
• 閉包（Closure）：內部函式可以存取外部函式的變數，函式結束後變數仍可存活。
• Decorator 是一種語法糖，本質是「接收一個函式，回傳一個新的函式」的高階函式。
• 使用 @ 語法糖可以簡潔地套用裝飾器。
• 裝飾器可用於邏輯共用、權限驗證、效能監控、快取等實務情境。
• functools.wraps 可保持被裝飾函式的名稱與 docstring 資訊。

一、基礎概念與語法​

1. 函式是物件​

def greet(name):
    return f"Hello, {name}"

say_hello = greet
print(say_hello("Alice"))  # Hello, Alice

函式可以被賦值給變數、作為參數傳遞，也能作為回傳值。

2. 函式作為參數的例子​

def do_twice(func):
    def wrapper():
        func()
        func()
    return wrapper

def say_hi():
    print("Hi!")

do_twice(say_hi)()

這就是簡單的裝飾器雛形，do_twice 接收一個函式，回傳一個新的函式。

二、實作一個簡單 decorator​

1. 不帶參數的 decorator​

def my_decorator(func):
    def wrapper():
        print("執行前")
        func()
        print("執行後")
    return wrapper

@my_decorator
def say_hello():
    print("Hello!")

say_hello()

輸出：​

執行前
Hello!
執行後

@my_decorator 這行等同於 say_hello = my_decorator(say_hello)。裝飾器會接手原本的函式，包裝成新的邏輯後回傳。

2. 處理有參數的函式​

def my_decorator(func):
    def wrapper(*args, **kwargs):
        print("執行前")
        result = func(*args, **kwargs)
        print("執行後")
        return result
    return wrapper

@my_decorator
def greet(name):
    print(f"Hello, {name}")

greet("KD")

使用 *args, **kwargs 可以支援任何參數的函式。

3. 保留原函式資訊：使用 functools.wraps​

import functools

def my_decorator(func):
    @functools.wraps(func)
    def wrapper(*args, **kwargs):
        print("執行前")
        return func(*args, **kwargs)
    return wrapper

@my_decorator
def add(x, y):
    """加總兩數"""
    return x + y

print(add.__name__)  # add
print(add.__doc__)   # 加總兩數

沒有 functools.wraps，函式的名稱會變成 wrapper，容易影響除錯與文件產生。

三、實用範例：計時 decorator​

import time
import functools

def timer(func):
    @functools.wraps(func)
    def wrapper(*args, **kwargs):
        start = time.time()
        result = func(*args, **kwargs)
        end = time.time()
        print(f"{func.__name__} 執行時間：{end - start:.4f} 秒")
        return result
    return wrapper

@timer
def slow_function():
    time.sleep(1.5)
    print("完成耗時操作")

slow_function()

四、進階：帶參數的 decorator​

有時我們希望 decorator 接收參數，例如指定權限等，這時候會需要再多一層函式包裝：

def repeat(times):
    def decorator(func):
        @functools.wraps(func)
        def wrapper(*args, **kwargs):
            for _ in range(times):
                func(*args, **kwargs)
        return wrapper
    return decorator

@repeat(3)
def say_hello():
    print("Hello!")

say_hello()

repeat(3) 會先執行，回傳 decorator(func)，再包裝原函式。

五、常見應用場景​

• 日誌紀錄（logging）
• 權限驗證（authorization）
• 執行時間分析（performance monitoring）
• 快取（caching）
• API 路由（如 Flask 的 @app.route）

總結​

Python 的 decorator 是一個非常實用的語法技巧，一旦理解其本質為「函式的包裝器」，就可以在實務開發中靈活應用。它讓我們可以以簡潔的方式注入共用邏輯，大大提升程式的可讀性與可維護性。

我們在練習 decorator 時，建議搭配日常開發情境，如記錄日誌、印出函式執行時間，從實作中加深理解。當你越熟悉它，便越能體會其在 Python 世界中的威力。

除了透過 Props 傳遞資料外，父元件還可以透過插槽將模板片段傳遞給子元件：

<template>
  <ChildComp>
    這是一些插槽內容！
  </ChildComp>
</template>

在子元件中，可以使用 <slot> 元素作為插槽來渲染父元件傳遞的內容：

<template>
  <!-- 子元件的模板 -->
  <slot />
</template>

插槽內的內容會被視為「預設內容」：當父元件沒有傳遞插槽內容時，會顯示這些預設內容：

<template>
  <slot>預設內容</slot>
</template>

目前我們尚未向 <ChildComp> 傳遞任何插槽內容，因此你應該會看到預設內容。現在試著利用父元件的 msg 狀態，為子元件提供一些插槽內容吧！

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>

除了接收 Props 之外，子元件也可以向父元件觸發事件：

<script setup>
// 宣告要觸發的事件
const emit = defineEmits(['response'])

// 觸發事件並傳遞參數
emit('response', 'hello from child')
</script>

emit() 的第一個參數是事件名稱，任何額外的參數都會傳遞給事件監聽器。

父元件可以使用 v-on 來監聽子元件觸發的事件——如下範例中，處理函式接收來自子元件 emit 的額外參數，並將其賦值給本地狀態：

<template>
  <ChildComp @response="(msg) => childMsg = msg" />
</template>

現在我們在編輯器中試試看吧！

子元件可以透過 Props 接收來自父元件的輸入。首先，子元件需要宣告它所接收的 Props：

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

注意，defineProps() 是一個編譯時的巨集，不需要額外匯入。一旦宣告後，msg Prop 就可以在子元件的模板中使用，也可以透過 defineProps() 返回的物件在 JavaScript 中存取。

父元件可以像設定屬性一樣，將 Prop 傳遞給子元件。若要傳遞動態值，也可以使用 v-bind 語法：

<template>
  <ChildComp :msg="greeting" />
</template>

我們現在在編輯器中試試看吧！

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

<script setup>
const props = defineProps({
  msg: String
})
</script>

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

到目前為止，我們只使用了一個單一的元件。實際的 Vue 應用程式通常是由巢狀元件所組成的。

父元件可以在其模板中渲染另一個元件作為子元件。要使用子元件，我們需要先匯入它：

import ChildComp from './ChildComp.vue'

然後，我們可以在模板中使用該元件，如下所示：

<template>
  <ChildComp />
</template>

我們現在試試看將匯入子元件並將其渲染到模板中。

<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
  <ChildComp />
</template>

<template>
  <h2>A Child Component!</h2>
</template>

有時我們可能需要以反應性的方式執行「Side-effect 副作用」，例如，當一個數值改變時將其記錄到控制台。我們可以使用觀察者來實現這一點：

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount) => {
  // 是的，console.log() 是一種副作用
  console.log(`新的計數是：${newCount}`)
})

watch() 可以直接監視一個 ref，每當 count 的值改變時，回調函數就會被觸發。watch() 也可以監視其他類型的數據來源——更多細節請參閱指南：觀察者（Watchers）。

比將訊息記錄到控制台更實用的例子，可能是當一個 ID 發生變化時，根據新 ID 獲取數據。我們的代碼目前是在元件掛載時，從一個模擬 API 獲取 todos 數據。此外，還有一個按鈕可以遞增應該被獲取的 todo ID。請嘗試實現一個觀察者，在按下按鈕時根據新 ID 獲取新的 todo 數據。

參考範例：

<script setup>
import { ref, watch } from 'vue'

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()

watch(todoId, fetchData)
</script>

<template>
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>