Vue 程式札記 : Ref 與 Reactive

在 Vue 3 的 Composition API 中，引入了兩個重要的響應式數據處理工具：ref 和 reactive，本文將介紹ref 和 reactive，並透過實際範例來解釋它們的用法和差異。

什麼是 Ref ?

ref 是一個用於創建響應式數據的函數，當你需要在 Composition API 中使用一個基本類型的變量（如字符串、數字或布林值）時，你可以使用 ref 來創建它，它會返回一個包含 value 屬性的對象，這個 value 屬性是響應式的，當它的值發生變化時，相關的界面也會自動更新。

<template>
  <div>
    <h2>使用 ref 的計數器範例</h2>
    <p>計數: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

const count = ref(0);

function increment() {
  count.value++;
}
</script>

在上面的範例中，我們使用 ref 創建了一個響應式的計數器 count，並在模板在中使用它。當點擊按钮时，會調用 increment 来增加計數器的值。由於 count 是響應式的，當它的值發生變化時，模板中的數值也會自動更新。

什麼是 Reactive ?

reactive 是另一個用於創建響應式數據的函數，reactive 不同於 ref，reactive 是用來處理複雜的數據結構，如陣列(Array)和物件(Object)，當你需要在 Composition API 中使用陣列或物件時，可以使用 reactive 來創建它們。

<template>
  <div>
    <h2>使用 ref 的計數器範例</h2>
    <p>計數: {{ state.count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

const state = reactive({
  count: 0
});

function increment() {
  state.count++;
}
</script>

在上面的範例中，我們使用 reactive 創建了一個響應式的狀態物件 state，並通過 increment 來增加 count 的值，而且我們可以直接使用 state.count 來訪問或修改計數器的值。

ref 與 reactive 的區別

雖然 ref 和 reactive 都是用於創建響應式數據的，但它們之間存在一些重要的區別：

• ref 用於處理基本類型的數據（如字符串、數字等），而 reactive 用於處理複雜的數據結構（如陣列和物件）。
• ref 返回的是一個包含 value 屬性的對象，你需要通過 value 來訪問或修改它。
• 當你將一個 ref 物件傳遞給<template>時，Vue 會自動解包它，所以你可以直接使用它而不需要 .value。但在 <script> 中，你仍然需要通過 .value 來訪問或修改它的值。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡