引言

在 Vue3 中，響應式最常用的兩個 API 就是 ref 和 reactive。很多開發(fā)者一開始對它們的區(qū)別不夠明確，看到任何狀態(tài)就想用 ref，或者對對象也習慣性用 ref 包一層，導致代碼可讀性、維護性下降，或者出現(xiàn)解構(gòu)導致響應丟失、整體替換麻煩等問題。

1. 基本概念

• ref：用于包裝一個獨立的響應式值。創(chuàng)建后會返回一個包含 .value 的對象，內(nèi)部對 .value 做響應式跟蹤。模板中 Vue 會自動解包 .value，在 JS 邏輯里需顯式用 .value 訪問或修改。

  import { ref } from 'vue';
  const count = ref(0);
  count.value++; // 觸發(fā)響應

• reactive：用于把一個對象或數(shù)組變?yōu)轫憫?Proxy。返回的就是該對象的代理，訪問寫法如 state.prop，對內(nèi)部嵌套對象/數(shù)組會遞歸轉(zhuǎn)為響應式。

  import { reactive } from 'vue';
  const state = reactive({ a: 1, b: { c: 2 } });
  state.a = 3;          // 觸發(fā)響應
  state.b.c = 5;        // 嵌套也響應

關(guān)鍵區(qū)別

• ref 更適合包裝原始類型或需要整體替換的場景；.value 代表實際值。
• reactive 適合包裝多字段對象/數(shù)組，直接訪問屬性更簡潔。

2. 訪問與解包：模板 vs JS 邏輯

• 模板中：Vue 會自動對 ref 進行解包。例如：

  <template>
    <div>{{ count }}</div>         <!-- 如果 count = ref(0)，模板會顯示 0 -->
    <div>{{ state.a }}</div>       <!-- state = reactive({ a: ... }) -->
  </template>

  模板里使用 ref、reactive 返回的變量都可直接寫，不用加 .value。

• JS 邏輯里：

  • ref：必須用 .value 訪問／賦值。
  • reactive：直接用 state.prop、state.prop = newValue。

示例：

import { ref, reactive } from 'vue';
export default {
  setup() {
    const loading = ref(false);
    const filters = reactive({ category: '', minPrice: null, maxPrice: null });
    function doSomething() {
      loading.value = true;           // ref
      filters.category = 'electronics'; // reactive
    }
    return { loading, filters, doSomething };
  }
};

3. 場景對比：何時用 ref，何時用 reactive

下面以電商常見需求為例，了解它們的使用差異。

3.1 單值狀態(tài) vs 多字段狀態(tài)

• 單值、標志位、計數(shù)器、頁碼、布爾 loading、是否收藏 等，典型用 ref。語義上就是一個變量，訪問/修改都集中在 .value，且若需要整體替換該值（如重置、切換）也很方便。

  const page = ref(1);
  const loading = ref(false);
  const isFavorite = ref(false);
  // 切換時： page.value = 1; isFavorite.value = true/false

• 多個相關(guān)字段聚合成一個對象，如搜索篩選條件、表單數(shù)據(jù)、購物車項集合和詳情對象等，用 reactive 更直觀：

  const filters = reactive({
    keyword: '',
    category: '',
    price: { min: null, max: null }
  });
  // 修改時： filters.keyword = 'xxx'; filters.price.min = 10

  若拆成多個 ref：const keyword = ref(''), const category = ref(''), …，當字段較多時不易管理；也無法一次性傳遞或傳入 API。

3.2 整體替換 vs 逐字段更新

• 需要整體替換狀態(tài)對象：如“加載遠程購物車數(shù)據(jù)并直接賦予當前狀態(tài)”“一鍵清空并恢復初始對象”等。用 ref 包對象更簡單：

  const cartRef = ref({ items: [], couponCode: '', total: 0 });
  // 加載后整體替換
  cartRef.value = newCartObj;

  若用 reactive：

  const cart = reactive({ items: [], couponCode: '', total: 0 });

// 替換時不能直接 cart = newCartObj，否則不會觸發(fā)響應；需要：
Object.assign(cart, newCartObj);
// 或手動清空 items: cart.items.splice(0), 重置其他字段
`Object.assign` 寫法較繁瑣，且當對象屬性更新邏輯復雜時需注意字段對齊。
- **只修改某些字段/數(shù)組操作**：如在購物車中增加、減少某項數(shù)量、移除某項、更新優(yōu)惠券、增加瀏覽次數(shù)等，多是逐字段操作，更適合 `reactive`，寫法簡潔：
const cart = reactive({ items: [], couponCode: '', total: 0 });
function increase(idx) {
  cart.items[idx].quantity++;
  recalcTotal();
}

如果用 ref，寫成 cartRef.value.items[idx].quantity++，多了 .value，可讀性略差。

3.3 組合場景示例

以搜索篩選和分頁為例，結(jié)合 ref/reactive：

<template>
  <input v-model="searchQuery" @keyup.enter="doSearch" placeholder="搜索商品" />
  <select v-model="filters.category">
    <option value="">全部</option>
    <option value="electronics">電子</option>
  </select>
  <div>
    <button @click="prevPage" :disabled="page <= 1">上一頁</button>
    <span>第 {{ page }} 頁</span>
    <button @click="nextPage">下一頁</button>
  </div>
  <div v-if="loading">加載中...</div>
  <ul v-else>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
<script setup>
import { ref, reactive } from 'vue';
const searchQuery = ref('');
const page = ref(1);
const loading = ref(false);
const filters = reactive({ category: '', priceRange: { min: null, max: null } });
const list = ref([]);
async function fetchData() {
  loading.value = true;
  // 構(gòu)造參數(shù)
  const params = {
    q: searchQuery.value,
    category: filters.category,
    min: filters.priceRange.min,
    max: filters.priceRange.max,
    page: page.value
  };
  // 假設調(diào)用接口返回 items、hasMore
  const res = await fetchProducts(params);
  list.value = res.items;
  loading.value = false;
}
function doSearch() {
  page.value = 1;
  fetchData();
}
function prevPage() {
  if (page.value > 1) {
    page.value--;
    fetchData();
  }
}
function nextPage() {
  page.value++;
  fetchData();
}
</script>

• searchQuery, page, loading, list 獨立值用 ref；filters 多字段用 reactive。兩者結(jié)合，寫法語義清晰、邏輯分明。

4. 解構(gòu)與響應丟失：常見陷阱

• reactive 解構(gòu)后喪失響應

  const state = reactive({ a: 1, b: 2 });
  const { a, b } = state;
  // 這里的 a、b 都是普通值，不再是響應式。模板或 watch 無法再跟蹤它們。

  • 解決：若想解構(gòu)并保持響應，可用 toRefs：

    import { reactive, toRefs } from 'vue';
    const state = reactive({ a: 1, b: 2 });
    const { a, b } = toRefs(state);
    // a、b 都是 ref，保持響應

• ref 解構(gòu)注意
  對于 const count = ref(0)，一般直接用 count；不應做 const { value } = count，因為拿到的 value 是初始值，后續(xù)對 count.value 修改不會更新這個解構(gòu)后的 value 變量，也不會觸發(fā)響應。

• 整體替換 vs 解構(gòu)
  如果本來想整體替換 reactive 對象，解構(gòu)后再合并新對象會更復雜。一般用 ref 包對象來明確表示整體替換。

5. 深度 vs 淺層響應

• reactive 默認深度遞歸：內(nèi)部嵌套對象/數(shù)組會在訪問時或初始化時轉(zhuǎn)為 Proxy。
• ref 包對象：當值是對象或數(shù)組時，Vue 內(nèi)部會對其做 reactive 處理，達到深度響應。但訪問時仍需 .value。
• shallowReactive / shallowRef：在特殊場景下，如果不想對深層嵌套做自動響應，可使用淺響應 API。但多數(shù)情況下默認深度足夠。

示例：若想對頂層字段變化跟蹤，但不關(guān)心內(nèi)部深層變化，可用 shallowReactive({ nested: { ... } })。

6. 團隊實踐與語義統(tǒng)一

• 保持一致性：團隊可制定簡單約定，比如：

  • 單值用 ref；多字段狀態(tài)用 reactive。
  • 若有大量整體替換場景，將對應對象用 ref 包裹，并在注釋或文檔中標明“此狀態(tài)將整體賦值替換”。
  • 避免隨意把對象都用 ref 包一層或把所有狀態(tài)都放到一個大 reactive 對象，導致解構(gòu)、替換、類型推斷等復雜。

• TypeScript 友好：無論 ref 還是 reactive，都有相應類型推斷?？山Y(jié)合接口定義：

  interface Cart { items: CartItem[]; couponCode: string; total: number; }
  const cartRef = ref<Cart>({ items: [], couponCode: '', total: 0 });
  // 或 reactive:
  const cart = reactive<Cart>({ items: [], couponCode: '', total: 0 });

  • 如果用 reactive，類型推斷里訪問 cart.items 等一目了然；用 ref 包對象時訪問需 .value.items，類型也清晰，但習慣上需注意。

• 可讀性與維護：若某狀態(tài)對象很大且只在特定場景整體替換，ref 包對象能讓代碼一眼看出“這是一個整體”；若多個位置需單字段修改，用 reactive 寫法更簡潔。結(jié)合團隊項目實際需求，選擇更貼近業(yè)務意圖的方式。

7. 性能與底層實現(xiàn)簡述

• 底層都是 Proxy & effect：reactive 底層用 Proxy 攔截 get/set；ref 底層實現(xiàn)封裝了對 .value 的 track/trigger，如果值是對象內(nèi)部也會遞歸轉(zhuǎn) reactive。
• 性能差異極小：兩者在常規(guī)使用下性能相當。區(qū)別主要在語義和寫法。
• 初始化開銷：reactive 在訪問深層屬性時會懶遞歸（或初始化時深度遍歷，取決內(nèi)部實現(xiàn)策略），而 ref 包基本類型開銷更?。坏趯ο髨鼍?，開銷差異在可接受范圍。通常不必為性能過度擔心，而是根據(jù)使用場景選擇更清晰易維護的方式。

8. 常見誤區(qū)糾正

1. “所有狀態(tài)都用 ref”

   • 雖然把對象用 ref(obj) 也能響應，但會導致 JS 邏輯里到處出現(xiàn) .value，可讀性差；解構(gòu)/傳參麻煩；整體替換與逐字段更新語義不夠明確。
   • 正確做法應先判斷：如果只是想更新字段，推薦 reactive；若經(jīng)常整體賦新值，ref 包對象可考慮。

2. “所有狀態(tài)都用 reactive”

   • 當只需管理單一值時，用 reactive 會將其包在對象里（如 reactive({ count: 0 })），這寫法冗余；并且整體替換需要 Object.assign，不夠直觀。
   • 對于標志位、計數(shù)、單值 API 返回數(shù)據(jù)、Boolean 開關(guān)等，推薦用 ref。

3. 忽視解構(gòu)導致響應丟失

   • 解構(gòu) reactive 對象字段時要用 toRefs；否則解構(gòu)后的變量再修改無法觸發(fā)視圖更新。面試中若提到解構(gòu)，需說明解決方案。

4. 混用場景未做區(qū)分

   • 例如把整個表單數(shù)據(jù)既用 reactive 管理，也在某些地方把它賦值給 ref，再修改一半字段時容易混淆響應；要在代碼風格上統(tǒng)一，明確何時整體替換、何時字段更新。

9. 總結(jié)

• 核心認識：ref 與 reactive 并非完全可互換，而是分別針對“獨立值/整體替換”和“復合對象/逐字段更新”場景設計。理解兩者語義、訪問方式和解構(gòu)注意。

• 建議：

  • 先分析業(yè)務需求：狀態(tài)是單一值還是多字段聚合？是否需要整體替換或只是字段更新？是否會在多個地方解構(gòu)或傳遞？
  • 按需選擇：簡單標志、計數(shù)、頁碼、loading、Boolean、ID 等用 ref；多個字段組合成配置、表單、購物車列表、復雜詳情對象等用 reactive。
  • 若有整體替換需求，也可用 ref 包對象。若用 reactive，注意用 Object.assign 或手動清理以觸發(fā)響應。
  • 謹慎解構(gòu)：了解 toRefs 用法；在 Composition API 里盡量直接操作 ref/reactive，避免無謂解構(gòu)。
  • 團隊約定：統(tǒng)一風格，避免不同開發(fā)者隨意選擇導致代碼風格混亂。

• 一句話概括：

  “Vue3 里 ref 是給單一值或需要整體替換的狀態(tài)包裝響應式，reactive 是給對象/數(shù)組做深度響應，用在多字段狀態(tài)更新更直觀，兩者語義不同、寫法不同，應根據(jù)需求選用。”

到此這篇關(guān)于玩懂Vue3的ref和reactive的文章就介紹到這了,更多相關(guān)vue ref和reactive內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論