Vue 中ref()與 reactive() 的區別

自足發表於2024-07-15
VueReact

在 Vue 3 中，組合式 API（Composition API）引入了新的響應式系統，使得狀態管理和邏輯複用變得更加靈活和強大。ref() 和 reactive() 是組合式 API 中兩個重要的響應式工具，它們各自有不同的使用場景和特性。在這篇部落格中，我們將深入探討 ref() 和 reactive() 的區別，並透過程式碼示例展示它們的實際應用。

ref() 和 reactive() 的基本概念

ref()

ref() 用於建立一個包含單一值的響應式引用。它可以是基本型別（如字串、數字、布林值）或物件型別。ref() 返回一個包含 .value 屬性的物件，.value 屬性持有實際的值。

reactive()

reactive() 用於建立一個響應式物件。它接收一個普通的 JavaScript 物件，並返回該物件的響應式代理。與 ref() 不同，reactive() 直接返回物件本身，而不是包裝在 .value 屬性中。

使用場景

ref() 的使用場景

ref() 適用於以下場景：

  1. 基本型別的響應式資料： 當你需要建立一個基本型別的響應式資料時，使用 ref() 是最合適的選擇。
  2. 單一值的響應式資料： 當你只需要一個單一值的響應式資料時，ref() 是一個簡單而直接的選擇。

reactive() 的使用場景

reactive() 適用於以下場景：

  1. 複雜物件的響應式資料： 當你需要建立一個包含多個屬性的複雜物件時，使用 reactive() 更加自然和方便。
  2. 巢狀物件的響應式資料： reactive() 可以處理巢狀物件，並確保所有巢狀屬性都是響應式的。

程式碼示例

使用 ref()

以下是一個使用 ref() 的示例：

<template>
  <div>
    <h1>Counter</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

在這個示例中，我們使用 ref() 建立了一個響應式的 count 變數，並透過 .value 屬性訪問和修改它。

使用 reactive()

以下是一個使用 reactive() 的示例：

<template>
  <div>
    <h1>User Profile</h1>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
    <button @click="updateProfile">Update Profile</button>
  </div>
</template>

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

export default {
  setup() {
    const user = reactive({
      name: 'John Doe',
      age: 30
    });

    const updateProfile = () => {
      user.name = 'Jane Doe';
      user.age = 25;
    };

    return {
      user,
      updateProfile
    };
  }
};
</script>

在這個示例中，我們使用 reactive() 建立了一個響應式的 user 物件，並直接修改其屬性。

深入理解 ref() 和 reactive()

響應式轉換

  • ref() 建立的響應式資料是透過 Ref 物件實現的，只有 .value 屬性是響應式的。
  • reactive() 建立的響應式資料是透過 Proxy 物件實現的，整個物件及其巢狀屬性都是響應式的。

解構問題

當我們解構 reactive() 建立的物件時，會丟失響應性：

const { name, age } = user; // 這樣解構會丟失響應性

解決方法是使用 toRefs()：

import { toRefs } from 'vue';

const { name, age } = toRefs(user);

而 ref() 建立的單一值在解構時不會有這個問題，因為它本身就是一個響應式引用。

效能考慮

在處理大量資料或複雜物件時，reactive() 的效能可能比 ref() 更高，因為 reactive() 使用 Proxy 物件進行響應式轉換，而 ref() 需要透過 .value 屬性訪問和修改值。

總結

ref() 和 reactive() 是 Vue 3 組合式 API 中兩個重要的響應式工具，它們各自有不同的使用場景和特性。ref() 適用於基本型別和單一值的響應式資料，而 reactive() 適用於複雜物件和巢狀物件的響應式資料。透過理解它們的區別和使用方法，我們可以更靈活地管理 Vue 元件中的狀態，提高程式碼的可讀性和維護性。

百萬大學生都在用的AI寫論文工具，篇篇無重複👉: AI寫論文

相關文章