前言
重要提示：文章只適合初學者，不適合專家！！！
什么是響應式對象？
在Vue3中，響應式對象就是這種智能溫控器。當你修改JavaScript對象的數據時，Vue會自動更新網頁上顯示的內容，無需手動操作DOM。簡單來說：數據變，頁面自動跟著變。
創建響應式對象的三種方式
1. reactive() - 用于對象
適合處理對象、數組等復雜數據結構
import { reactive } from 'vue';// 創建一個響應式用戶對象
const user = reactive({name: '張三',age: 30,hobbies: ['讀書', '游泳']
});// 修改屬性 - 自動觸發更新
user.age = 31;
user.hobbies.push('登山'); // 數組變化也能檢測
2. ref() - 全能選手
適合處理字符串、數字等基本類型，也可以處理對象
import { ref } from 'vue';// 創建一個響應式計數器
const count = ref(0); // 創建響應式字符串
const message = ref('你好Vue3！');// 創建響應式對象（內部會轉為reactive）
const settings = ref({theme: 'light',fontSize: 16
});// 修改值時需要通過.value
count.value = 5;
message.value = '歡迎學習響應式';
settings.value.fontSize = 18;
3. toRefs() - 保持響應性的解構
解決reactive對象解構后丟失響應性的問題
import { reactive, toRefs } from 'vue';const user = reactive({name: '李四',age: 25
});// 普通解構會丟失響應性 ?
// const { name, age } = user;// 使用toRefs保持響應性 ?
const { name, age } = toRefs(user);// 在腳本中使用要加.value
console.log(name.value); // "李四"
模板和腳本中使用實戰
完整組件示例
<template><div class="user-card"><!-- ref對象在模板自動解包，無需.value --><h2>{{ name }}</h2><!-- reactive對象直接使用屬性 --><p>年齡: {{ age }} 歲</p><p>狀態: {{ isAdult ? "成年人" : "未成年人" }}</p><!-- 使用ref定義的計算屬性 --><p>BMI: {{ bmi }}</p><button @click="increaseAge">過生日</button><button @click="changeName">改名</button><input v-model="userInfo.height" type="number" placeholder="輸入身高" /></div>
</template><script setup>
import { reactive, ref, computed, toRefs } from "vue";// 使用ref定義基本類型
const name = ref("王小明");// 使用reactive定義對象
const userInfo = reactive({age: 16,height: 175, // 厘米weight: 70, // 公斤
});// 使用toRefs解構，保持響應性
const { age } = toRefs(userInfo);// 計算屬性
const bmi = computed(() => {const heightInM = userInfo.height / 100;return (userInfo.weight / (heightInM * heightInM)).toFixed(1);
});// 基于計算屬性的狀態
const isAdult = computed(() => userInfo.age >= 18);// 修改基本類型的方法
function changeName() {name.value = name.value === "王小明" ? "李小華" : "王小明";
}// 修改響應式對象的方法
function increaseAge() {userInfo.age += 1;userInfo.weight += 1; // 過生日重了1公斤 😄
}
</script><style>
.user-card {border: 1px solid #ccc;padding: 20px;border-radius: 8px;max-width: 300px;
}
button {margin: 5px;
}
</style>常見疑問解答
1. ref和reactive該用哪個？
| 場景 | 推薦使用 | 示例 |
|---|---|---|
| 基本類型（數字、字符串） | ref | const count = ref(0) |
| 對象和數組 | reactive | const user = reactive({...}) |
| 需要在組件外部傳遞值 | ref | 模板引用更靈活 |
| 表單綁定 | ref | v-model="message" |
| 解構對象屬性 | toRefs | const { id } = toRefs(item) |
經驗法則：默認使用ref，對象/數組用reactive
2. 為什么我的數據變化沒有觸發更新？
常見原因：
-
直接解構reactive對象 ?
錯誤：const { age } = user(會丟失響應性)
正確：const { age } = toRefs(user)? -
直接替換reactive對象 ?
let state = reactive({ count: 0 }); // 錯誤方式 - 失去響應性 state = { count: 1 };正確做法：修改屬性而不是整個對象 ?
state.count = 1 -
異步更新數據 ?
需要在數據修改后操作DOM？使用nextTick：import { nextTick } from 'vue';count.value++; nextTick(() => {// 此時DOM已經更新console.log(document.getElementById('count').textContent); });
總結：響應式對象核心要點
-
核心概念：數據變 ? 視圖自動更新
-
創建方式：
reactive()：用于對象/數組ref()：用于基本類型、對象引用toRefs()：安全解構對象屬性
-
模板使用：
ref對象自動解包（不用.value）reactive對象直接使用屬性
-
注意事項：
- 避免直接解構reactive對象
- 修改數組使用push/pop等方法
-
經驗法則：
“遇到對象用reactive，其他情況用ref”
