vue中ref()和reactive()區(qū)別小結(jié)

更新時間：2025年07月03日 11:43:31 作者：翻滾吧鍵盤

本文主要介紹了vue中ref()和reactive()區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

核心區(qū)別速查表

特性	ref()	reactive()
適用類型	? 任何類型 (字符串、數(shù)字、布爾、對象、數(shù)組等)	? 僅限對象類型 (Object, Array, Map, Set)
訪問/修改	在 JS 中必須通過 .value 屬性	在 JS 中直接訪問，像普通對象一樣
模板中使用	不需要 .value，Vue 會自動解包	直接訪問，像普通對象一樣
重新賦值	? 可以對整個 .value 重新賦值	? 不能直接對整個變量重新賦值，會破壞響應性
底層原理	通過一個包含 value 屬性的對象來實現(xiàn)包裝	使用 ES6 的 Proxy 實現(xiàn)對整個對象的劫持

ref()：更靈活的“盒子”

ref() 的設計初衷是為了處理原始數(shù)據(jù)類型（Primitive Types），如字符串、數(shù)字、布爾值。當然，它也可以用來包裝對象。

你可以把 ref() 想象成一個萬能的、響應式的“盒子”。無論你放什么進去，它都會把它裝進一個特殊的盒子里。要訪問或修改里面的東西，你需要打開這個盒子，也就是訪問它的 .value 屬性。

ref()的關鍵點：

接受任何值：ref('some string'), ref(123), ref(true), ref({ name: '張三' }) 都可以。
JS 中必須用 .value：在 <script setup> 或 setup() 函數(shù)中，訪問和修改 ref 創(chuàng)建的變量時，必須通過 .value。
模板中自動解包：在 <template> 中使用時，Vue 非常智能，會自動“打開盒子”，所以你不需要寫 .value。

ref()示例代碼：

<template>
  <div>
    <p>計數(shù): {{ count }}</p>
    <button @click="increment">增加</button>

    <p>用戶信息: {{ user.name }}</p>
  </div>
</template>

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

// 1. 用于原始類型
const count = ref(0);

// 2. 在 JS/TS 中，必須通過 .value 來訪問和修改
function increment() {
  count.value++;
}

// 3. 也可以用于對象，但同樣需要 .value
const user = ref({ name: '張三' });
console.log(user.value.name); // 輸出: 張三
</script>

reactive()：對象的“代理”

reactive() 專門用于將對象類型（包括普通對象、數(shù)組、Map、Set）的數(shù)據(jù)轉(zhuǎn)換成響應式數(shù)據(jù)。

它不做任何包裝，而是直接返回一個原始對象的“代理” (Proxy)。你對這個代理對象的所有操作（讀取、修改、添加、刪除屬性）都會被 Vue 攔截，從而觸發(fā)視圖更新。

reactive()的關鍵點：

只能用于對象：reactive({ ... }), reactive([ ... ]) 可以，但 reactive(123) 會報錯。
直接訪問：使用起來和普通 JS 對象一模一樣，不需要 .value。
不能重新賦值：這是一個非常重要的陷阱！你不能直接用一個新的對象替換整個 reactive 變量，否則會失去響應性，因為這切斷了原始代理對象的連接。

reactive()示例代碼：

<template>
  <div>
    <p>用戶信息: {{ state.user.name }} - {{ state.user.age }} 歲</p>
    <p>他的愛好: {{ state.hobbies.join('、') }}</p>
    <button @click="updateUser">更新用戶信息</button>
  </div>
</template>

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

// 1. 只能用于對象或數(shù)組
const state = reactive({
  user: {
    name: '李四',
    age: 30
  },
  hobbies: ['編程', '音樂']
});

function updateUser() {
  // 2. 直接修改屬性，像普通對象一樣
  state.user.age++;
  state.hobbies.push('運動');

  // ? 錯誤做法：直接替換整個對象會導致響應性丟失！
  // state = { user: { name: '王五', age: 40 }, hobbies: [] }; 

  // ? 正確做法：逐個屬性賦值或使用 Object.assign
  // Object.assign(state, { user: { name: '王五', age: 40 }, hobbies: [] });
}
</script>