快捷導(dǎo)航

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

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

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

核心區(qū)別速查表

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

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

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

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

ref()的關(guān)鍵點(diǎn)：

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

ref()示例代碼：

<template>
  <div>
    <p>計(jì)數(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)換成響應(yīng)式數(shù)據(jù)。

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

reactive()的關(guān)鍵點(diǎn)：

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

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('運(yùn)動(dòng)');

  // ? 錯(cuò)誤做法：直接替換整個(gè)對象會(huì)導(dǎo)致響應(yīng)性丟失！
  // state = { user: { name: '王五', age: 40 }, hobbies: [] }; 

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

總結(jié)與使用建議

優(yōu)先使用 ref()：

當(dāng)你需要處理原始數(shù)據(jù)類型（字符串、數(shù)字、布爾值）時(shí)，必須使用 ref()。
當(dāng)你不確定數(shù)據(jù)類型時(shí)，ref() 是更安全、更通用的選擇。
社區(qū)中有一種流行的風(fēng)格是“始終使用 ref()”，以保持代碼風(fēng)格的一致性。因?yàn)?ref() 既能處理原始類型，也能處理對象。

在特定場景下使用 reactive()：