2025-01-28-vue3_ref 是什麼

#2025-01-28-vue3_ref 是什麼

ref 是什麼

很好！這是學 Vue 3 Composition API 的關鍵核心問題之一。

---

🔧 ref 是什麼？

在 Vue 3 中，ref 是一個 用來創建「響應式變數」的函式。

換句話說：

當你希望 Vue 追蹤某個值的變化（讓它在畫面上即時更新），你就應該用 ref。

---

✅ 基本用法：

import { ref } from 'vue'

const count = ref(0)

• 這裡的 count 是一個「特殊物件」。
• 它的值放在 count.value 裡面。
• Vue 會自動幫你追蹤這個值，並在畫面上自動更新。

---

💡 在模板裡怎麼用？

<template>
  <div>
    <p>目前數字：{{ count }}</p>
    <button @click="count++">增加</button>
  </div>
</template>

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

const count = ref(0)
</script>

🔍 注意：

• 在 JS 裡你要寫 count.value
• 在 HTML 模板中（<template> 區塊）可以直接寫 {{ count }}，Vue 會自動解開 .value

---

🤔 為什麼不用 let count = 0 就好？

因為普通變數不是「響應式」的，Vue 不會追蹤它的變化，不會幫你更新畫面。

方式	是否能讓畫面自動更新？
let count = 0	❌ 不會
const count = ref(0)	✅ 會自動更新

---

📌 總結一分鐘：

• ref(初始值)：創建一個響應式的值
• 在 JS 裡用 .value 存取它
• 在 <template> 中可以直接使用（會自動解開）

---