摘要

ref() 是 Vue 中用來建立「響應式」變數的最基礎工具。它能將任何型別的資料（特別是數字、字串等基本型別）包裝成一個響應式物件。

定義與說明

ref() 函數接收一個初始值，並回傳一個帶有 .value 屬性的特殊物件（稱為 "ref 物件"）。在 JavaScript (<script>) 中，你必須透過 .value 來存取或修改這個值。而在模板 (<template>) 中，Vue 會自動幫你「解包」(unwrap)，所以你可以直接使用變數名稱，無需 .value。

實作範例

Vue SFC

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

// 建立一個響應式的 ref 物件，初始值為 0
const count = ref(0);

function increment() {
  // 在 script 中，必須使用 .value 來修改
  count.value++;
  console.log(`目前的值是: ${leftBrace}count.value${rightBrace}`);
}
</script>

<template>
  <button @click="increment">點擊次數: {{ count }}</button>
</template>

結論

ref() 是讓單一值（無論是基本型別還是物件）具備響應性的首選方式。它的核心規則就是：「在 script 中用 .value，在 template 中直接用」。

ref 響應式基本型別