Vue3中的Ref與Reactive：深入理解響應式程式設計

CodeForBetter發表於2023-09-22
VueReact程式設計

前言

Vue 3是一個功能強大的前端框架，它引入了一些令人興奮的新特性，其中最引人注目的是ref和reactive。這兩個API是Vue 3中響應式程式設計的核心，本文將深入探討它們的用法和差異。

什麼是響應式程式設計？

在Vue中，響應式程式設計是一種使資料與UI保持同步的方式。當資料變化時，UI會自動更新，反之亦然。這種機制大大簡化了前端開發，使我們能夠專注於資料和使用者介面的互動，而不必手動處理DOM更新。

Ref

ref是Vue 3中的一個簡單響應式API，用於建立一個包裝基本資料型別的響應式引用(也可以包裝複雜型別，只不過底層還是由reactive的方式實現的)。它的主要優點是能夠輕鬆包裝基本資料型別，並且具有清晰的訪問和更新方式。

用法示例

import { ref } from 'vue';

const count = ref(0);

// 訪問資料
console.log(count.value); // 輸出 0

// 更新資料
count.value = 1;

在上面的示例中，我們首先匯入了ref函式，然後使用它建立了一個名為count的響應式引用。我們可以像訪問普通變數一樣訪問它，並且當我們更新count時，相關的UI會自動更新。

優勢

  • 明確的資料訪問語法（.value）
  • 適用於包裝基本資料型別，如數字、字串等。
  • 更容易閱讀和理解，適合處理簡單的響應式資料。

Reactive

與ref不同，reactive是用於建立包裝物件的響應式引用。這意味著它可以用於建立響應式物件，而不僅僅是基本資料型別。它的主要優勢是在處理複雜資料結構時更加靈活，能夠包裝整個物件。

用法示例

import { reactive } from 'vue';

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

// 訪問資料
console.log(user.name); // 輸出 'John'

// 更新資料
user.age = 31;

在這個示例中，我們使用reactive來建立了一個名為user的響應式物件。我們可以像訪問普通物件屬性一樣訪問和更新user的屬性，Vue會自動追蹤並處理資料變化。

優勢

  • 適用於包裝複雜的物件和資料結構，包括巢狀物件。
  • 不需要額外的語法（.value），直接訪問屬性。
  • 更適合處理多個相關屬性的情況，如表單欄位或元件狀態。

Ref與Reactive的區別

  1. 資料型別：ref用於包裝基本資料型別（如數字、字串），而reactive用於包裝物件。
  2. 訪問資料：使用ref時，需要透過.value來訪問資料，而reactive則允許直接訪問屬性。
  3. 資料的包裝：ref返回一個包裝物件，而reactive返回一個包裝後的物件。

Vue 3響應式系統的原理

Vue 3的響應式系統建立在JavaScript的Proxy物件和Vue 2的Object.defineProperty之上，使其更加靈活和強大。vue官方文件對響應式原理的解釋

Proxy是什麼？

Proxy 是JavaScript中的一個內建物件，它允許你建立一個代理物件，可以用來攔截對目標物件的各種操作，例如讀取、寫入、屬性檢索等。Proxy 物件通常用於實現超程式設計·，這意味著你可以控制、定製物件的行為。

以下是一些關於Proxy的基本概念和用法：

建立一個 Proxy 物件

要建立一個Proxy物件，你需要傳遞兩個引數：目標物件和一個處理器物件。處理器物件包含了一些方法，用於定義代理物件的行為。

const target = { name: 'John' };
const handler = {
  get(target, key) {
    console.log(`Getting ${key} property`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`Setting ${key} property to ${value}`);
    target[key] = value;
  }
};

const proxy = new Proxy(target, handler);

攔截器方法

Proxy處理器物件中可以包含各種攔截器方法，用於控制不同操作。一些常見的攔截器方法包括：

  • get(target, key, receiver)：攔截屬性的讀取操作。
  • set(target, key, value, receiver)：攔截屬性的寫入操作。
  • has(target, key)：攔截 in 運算子。
  • deleteProperty(target, key)：攔截 delete 運算子。
    等等...(其他方法與之類似),這些攔截器方法允許你定義代理物件的行為，以滿足你的需求。

使用 Proxy 物件

一旦建立了Proxy物件，你可以像使用普通物件一樣使用它，但它會在後臺執行攔截器方法。

console.log(proxy.name); // 會觸發 get 攔截器，輸出 "Getting name property"
proxy.age = 30; // 會觸發 set 攔截器，輸出 "Setting age property to 30"

在上面的程式碼中，我們建立了一個Proxy物件proxy，它會攔截對target物件的讀取和寫入操作。

應用示例

Proxy 物件的應用非常廣泛，它可以用於實現資料繫結、事件系統、攔截操作等等。在一些現代 JavaScript 框架和庫中，如 Vue 3 和 Vuex,Proxy被廣泛用於實現響應式系統，它能夠監聽物件的變化並自動觸發相應的更新操作。

ref的原理

ref的原理相對簡單。它使用Proxy物件來包裝基本資料型別，例如數字、字串等。當你使用ref建立一個響應式引用時，實際上建立了一個Proxy物件，它會攔截對該引用的讀取和寫入操作。

例如，當你訪問count.value時，Proxy會捕獲這個操作，然後返回實際的值。當你更新count.value時，Proxy也會捕獲這個操作，並觸發相關的依賴更新，從而使相關的UI重新渲染。

reactive的原理

reactive的原理涉及更復雜的物件。它使用Proxy物件來包裝整個物件，而不僅僅是其中的屬性。這意味著你可以在一個物件上新增、刪除或修改屬性，並且這些操作都會被Proxy捕獲。

當你訪問或修改一個被reactive包裝的物件的屬性時，Proxy會捕獲這些操作，並自動追蹤依賴。這意味著當任何屬性發生變化時，Vue會知道哪些元件依賴於這些屬性，並且會自動更新這些元件以反映最新的資料。

響應式系統的實現

雖然上述是對Vue 3響應式系統的簡要解釋，但在Vue原始碼。中，這一機制的實現要更復雜一些。Vue原始碼中有大量的邏輯用於處理依賴追蹤、派發更新等操作，以確保資料和UI之間的同步。
如果你想深入研究Vue的原始碼，可以進一步瞭解它是如何實現的。

總結

Vue 3中的ref和reactive是響應式程式設計的核心工具，它們使資料與UI之間的同步變得輕鬆。根據您的需求，選擇適當的API來包裝您的資料，以獲得最佳的開發體驗。ref適用於基本資料型別，而reactive適用於物件，透過靈活使用這兩者，您可以更輕鬆地構建出動態的Vue 3應用程式。
希望本文對你有所幫助，深入理解ref和reactive將為你在Vue 3中的響應式程式設計提供堅實的基礎。繼續探索Vue 3的強大功能，創造出令人印象深刻的Web應用程式吧！

相關文章