建立 2026-09-15 更新 2026-09-15

響應式

響應式（Reactivity）是 Vue 的核心：你改 JavaScript 狀態，畫面自動更新。底層會追蹤「誰讀了哪些資料」，之後只重跑受影響的部分。官方：Reactivity Fundamentals。

ref：單一值

ref() 把值包成響應式物件。在 script 裡用 .value 讀寫；在樣板裡不必加 .value，Vue 會自動解開。

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

物件、陣列也可以放進 ref。改 list.value.push(item) 或整個換掉 list.value = next 都會被追蹤。

reactive：物件

reactive() 讓整個物件變成響應式。讀寫時不要加 .value：

import { reactive } from 'vue'

const form = reactive({
  name: '',
  age: 18,
})

form.name = 'Ada'

限制：不能直接換掉整個物件（form = { ... } 會失去響應式）。解構 const { name } = form 也會丟失追蹤，要用 toRefs(form)。入門時，多數情況用 ref 就夠，心智負擔較小。

常見踩坑

• 在 script 裡忘了 .value：count++ 不會動到 ref 裡的數字。
• 把普通物件塞進元件狀態卻期望它自動更新：先 ref 或 reactive 包起來。
• 用 v-for 時改陣列索引或加不存在的屬性：優先用陣列方法（push、splice）或整個換成新陣列。

Vue 3 用 Proxy 做響應式，比 Vue 2 的 Object.defineProperty 完整，但仍要透過響應式包裝才會被追蹤。

接下來

畫面要「由資料算出來」用 computed；「資料變了去打 API」用 watch。指令列表見 指令。

推薦影音

Reactivity in Vue 3 — How does it work?

來源：Vue Mastery　約 10 分鐘

官方文件推薦平台的課：用最小例子講依賴追蹤，為什麼改 ref 畫面會動。對應本頁核心觀念。

Vue 響應式狀態

來源：彭彭的課程

繁中從畫面出發示範響應式狀態。適合先看操作、再回來看本頁的 ref／reactive 差異。