在 Day 5 中，我們透過 getCustomers 成功從後端取得了客戶資料，並把它存進了變數 customers。

問題來了：如果我們新增或刪除了一個客戶，畫面要如何自動更新，而不需要手動刷新頁面或操作 DOM 呢？

這正是 Vue 最核心的特性——響應式系統 (Reactivity System)。它的任務是將資料與畫面連結起來，當資料變動時，畫面會立即做出響應。

Vue 的兩個響應式 API：ref 與 reactive

Vue 3 提供了兩種方式來建立響應式資料：ref 與 reactive。你可以把它們想像成容器，用來裝不同類型的資料。

ref - 單一值的響應式資料

• 適合用來存放數字、字串、布林值等單一型別。
• 在 <script/> 中存取或修改時要透過 .value。
• 在模板 (<template>) 中可以直接使用，不需要 .value。

📌 範例：計數器

vue

<template>
  <p>點擊次數: {{ count }}</p>
  <button @click="addCount">點我+1</button>
</template>

<script setup>
import { ref } from 'vue';

// 用 ref 把 0 包裝成一個響應式物件
const count = ref(0);

function addCount() {
  // 修改時要透過 .value
  count.value++;
  console.log(count.value);
}
</script>

當我們想要「當數字變動時，畫面自動顯示最新值」。如果只是普通變數，Vue 並不會幫你更新畫面。
ref 的作用就是讓數據變動時，畫面自動顯示最新值。

reactive - 物件或陣列的響應式資料

• 用途：適合用來存放物件或陣列。
• 存取規則：可以直接操作屬性，不需要 .value。

📌 範例：延續 Day 5 的客戶 API

vue

import { reactive } from 'vue'
import { getCustomers } from '@/api/customers'

const state = reactive({
  customers: [],
  isLoading: false
})

export async function fetchCustomers() {
  try {
    state.isLoading = true
    const res = await getCustomers()
    if (res.data?.success) {
      // 直接修改後畫面就會更新
      state.customers = res.data.data
    }
  } finally {
    state.isLoading = false
  }
}

這邊我們需要同時管理多個狀態（像是 customers 和 isLoading）。
如果用普通物件，Vue 不會自動追蹤它的改變。
透過 reactive，可以讓 Vue 追蹤它們的變化，並自動刷新畫面。

響應式怎麼運作？

響應式系統聽起來很神奇，其實可以用「訂報紙」來理解：

1. 資料（state.customers）：像是一家報社。

2. 畫面（<li v-for="c in state.customers">）：像是訂閱報紙的讀者。

3. Vue 初始化（onMounted）：當畫面第一次使用 state.customers，就相當於讀者去報社登記，表示「之後有新報紙請寄給我」。

4. 資料改變：當 fetchCustomers 更新 state.customers 時，等於報社出了新一期報紙。

5. 畫面更新：所有訂戶會立刻收到最新一期報紙，畫面也就更新了。

👉 簡單來說：誰變了 → 通知誰 → 更新畫面。

ref vs reactive，怎麼選？

ref：

• 適用於任何資料類型

• 在 <script /> 中需要 .value

• 在模板中可直接使用

reactive：

• 適用於物件或陣列

• 操作屬性時不用.value

• 但要小心：不能直接整個替換物件，否則會失去響應性

// ❌ 會失效
state = { customers: [] }  

// ✅ 正確做法
Object.assign(state, { customers: [] })

總結

我們學會用 ref（單一值） 與 reactive（物件/陣列) 把一般資料變成響應式資料。

透過這些工具，我們可以讓資料變動時，Vue 自動更新畫面，避免手動操作 DOM。

明天，我們終於要開始建立我們的環境了！ Day 7：[Vueの呼吸・陸之型] 開發環境 - 建立Vue專案與工具配置。 心を燃やせ！🔥