摘要

reactive() 是 Vue 提供的另一個建立響應式狀態的函數，它專門用於將一個物件或陣列轉換成響應式的代理物件。

定義與說明

reactive() 函數接收一個物件或陣列，並回傳該物件的「響應式代理」。與 ref() 不同，當你操作 reactive() 建立的代理物件時，你不需要使用 .value，可以像操作普通 JavaScript 物件一樣直接存取和修改其屬性，Vue 會自動追蹤這些變化。

主要限制：

reactive() 只能用於物件型別（Object, Array 等），且你不能直接替換整個代理物件，否則會失去響應性。

實作範例

Vue SFC

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

// 建立一個響應式的代理物件
const user = reactive({
  name: 'Jake',
  age: 30,
  hobbies: ['Coding', 'Music']
});

function addHobby() {
  // 直接修改屬性，無需 .value
  user.hobbies.push('Reading');
  user.age++;
}
</script>

<template>
  <p>姓名: {{ user.name }}</p>
  <p>年齡: {{ user.age }}</p>
  <p>愛好: {{ user.hobbies.join(', ') }}</p>
  <button @click="addHobby">增加愛好和年齡</button>
</template>

結論

reactive() 是讓複雜物件或陣列整體具備響應性的理想工具。它的優點是語法更自然（無需 .value），但缺點是只能用於物件型別且不能直接賦值替換。

reactive 物件陣列