Reactive

響應式狀態​

響應式是

➤ 簡單來說是一套讓「資料變動能自動反映在畫面上」的機制

當你在模板中使用了一個 ref，Vue 會在元件首次渲染時追蹤它的使用。當你改變這個 ref 的值時，Vue 能夠偵測到變化，並自動重新執行該元件的 render 函式，生成新的虛擬 DOM，並且透過差異比對（diff）演算法，只更新實際變更的 DOM 節點，而非整個元件重新渲染或整頁 DOM 替換。這通過一個基於依賴追蹤的響應式系統實現。響應性系統在深入響應式原理中有更詳細的討論

這種「資料變 → DOM 跟著變」的設計，就是所謂的響應式。

把資料（ref / reactive）想像成「感應器」，Vue 會在元件渲染時幫它裝上「感應器」，只要資料一動，Vue 馬上知道該更新誰。

在 Composition API 風格中，推薦使用 ref() 函式聲明響應式狀態：

ref()​

1. 用於原始型別
2. 回傳一個帶有 .value 屬性的 ref 物件
3. 響應式的值就是透過 .value 取得
4. 也可用來包裝物件（內部會自動轉為 reactive）

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

const count = ref(0)

console.log(count.value) // 0

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

<template>
  <button @click="increment">
    {{ count }} // 模板使用不需 .value
  </button>
</template>

reactive()​

1. 用於物件、陣列、巢狀資料結構
2. 回傳一個 Proxy 包裝的 reactive 物件
3. 不適用原始型別
4. 支援深層結構（每層都會是響應式）
5. 若解構或展開會失去響應性

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

const state = reactive({ count: 0 })

console.log(state.count) // 0
</script>

<template>
  <button @click="state.count++">
    {{ state.count }}
  </button>
</template>