Vue ref 與 reactive 入門教學筆記 | 學習筆記

前言

在 Vue 3 中，ref 與 reactive 都是用來創建響應式資料的工具，但它們適用的情境略有不同。以下是清楚的比較與實際使用範例，幫助你理解什麼時候該用哪一個。

ref 使用情境

適用於：

• 原始資料型別：如 Number、String、Boolean、Date 等。
• 你只需要追蹤單一值。
• 當你需要某個變數傳遞到 <template> 或函式中。

語法：

import { ref } from 'vue'

const count = ref(0)
count.value++ // 需要用 .value 訪問或修改

範例：

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

const message = ref('Hello')
const count = ref(0)

const updateMessage = () => {
  message.value = 'Hi Vue 3'
}
</script>

reactive 使用情境

適用於：

• 物件或陣列：需要操作多個屬性的資料結構。
• 多層巢狀資料或你希望所有屬性都具有響應性。
• 表單資料、設定物件等複雜狀態管理。

語法：

import { reactive } from 'vue'

const user = reactive({
  name: 'Daniel',
  age: 30
})

user.age++ // 直接修改即可，無需 .value

範例：

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

const form = reactive({
  username: '',
  email: '',
  isSubscribed: false
})

const submitForm = () => {
  console.log(form.username, form.email, form.isSubscribed)
}
</script>

⚠️ ref 包物件 vs reactive

雖然你也可以這樣用：

const user = ref({ name: 'Daniel', age: 30 })

但要存取時就需要：

user.value.name = 'John'

用 reactive 則可以直接操作：

user.name = 'John'

所以若你有物件資料，通常選擇 reactive 更直覺。

建議使用方式整理：

Related Posts