引言

隨著 Vue 3 的問世，我們迎來了一個全新的響應式系統，它不僅簡化了響應式應用的開發流程，還提升了開發體驗的直觀性。這個系統與 JavaScript 的原生特性緊密相連，讓開發者在享受 Vue 提供的響應式特性的同時，能夠使用他們熟悉的數據類型。本文將深入探討 Vue 3 的響應性系統與 JavaScript 標準對象和數據類型的對比，幫助 JavaScript 開發者更輕松地融入 Vue 的世界。

Vue 3 響應性系統與 JavaScript 的對比

Vue 3 的響應性系統核心在于 reactive 和 ref 這兩個工具。它們讓數據的追蹤和更新變得輕而易舉，UI 的變化也能即時反映出來。通過對比，我們可以更清晰地理解 Vue 3 是如何處理不同數據類型的響應性的。

1. 對象與嵌套對象

在 JavaScript 中，對象是存儲多個值的容器，但它們并不具備自動響應性。

• JavaScript 示例：

const state = { count: 0, name: 'Vue 用戶' };
state.count++; // UI 無自動更新

• Vue 3 示例：

import { reactive } from 'vue';
const state = reactive({ count: 0, name: 'Vue 用戶' });
state.count++; // 若在模板中使用，UI 將自動更新

在 Vue 3 中，reactive 將狀態對象轉變為響應式對象，任何對 state.count 的更改都會觸發 UI 的自動重新渲染，極大地簡化了 Vue 中的數據管理。

2. 數組

Vue 3 的響應性同樣能夠與數組無縫協作，輕松追蹤數組的添加、刪除和修改操作。

• JavaScript 示例：

const items = [1, 2, 3];
items.push(4); // 更新，但 UI 無響應性更新

• Vue 3 示例：

const items = reactive([1, 2, 3]);
items.push(4); // 自動觸發 UI 更新

在 Vue 3 中，數組通過 reactive 變為響應式，任何變化都會即時更新 UI。

3. 原始數據類型與 ref

在 Vue 3 中，ref 使得字符串、數字和布爾值等原始值具備響應性。

• JavaScript 示例：

let count = 0;
count++; // 無響應性

• Vue 3 示例：

import { ref } from 'vue';
const count = ref(0);
count.value++; // UI 響應式更新

ref 在這里創建了一個響應式變量，使得原始值在 Vue 中也能響應式地工作，這是標準 JavaScript 中所不具備的。

4. 函數與計算屬性

在 JavaScript 中，函數用于計算和數據轉換，但它們不會在依賴項變化時自動更新。Vue 3 的計算屬性讓函數具備響應性。

• JavaScript 示例：

const getUserName = (user) => `用戶：${user.name}`;

• Vue 3 示例：

import { reactive, computed } from 'vue';
const user = reactive({ name: 'Vue 用戶' });
const userName = computed(() => `用戶：${user.name}`);

通過 computed，Vue 3 允許函數響應式地更新其結果，當依賴項發生變化時，結果也會自動更新，使得數據流更加簡單和聲明式。

5. 映射和集合

Vue 3 能夠使 Map 和 Set 集合響應式，盡管在某些情況下深度響應性并不完全支持。

• JavaScript 示例：

const map = new Map();
map.set('key', 'value'); // 標準的 JS 映射，無響應性

• Vue 3 示例：

const map = reactive(new Map());
map.set('key', 'value'); // 具有響應性的映射

Vue 的 reactive 讓你能夠追蹤 Map 和 Set 這類集合的更新，這些在 JavaScript 中原本是不具備響應性的。

比較表

為了快速參考，以下是 Vue 3 的響應性與標準 JavaScript 對象的不同之處：

• Object：{ count: 0 } → reactive({ count: 0 })
• 嵌套對象：{ profile: { age: 25 } } → reactive({ profile: { age: 25 } })
• Array：[1, 2, 3] → reactive([1, 2, 3])
• 原始類型（數字）：let count = 0 → const count = ref(0)
• Function：const func = () => {} → const func = computed(() => {})
• Map：const map = new Map() → const map = reactive(new Map())

結論

Vue 3 的響應性系統不僅提供了響應式數據的強大能力，還保留了 JavaScript 對象、數組、映射等數據結構的熟悉感。這使得在應用程序中采用和實現響應性變得更加容易，同時保持代碼的清晰和簡潔。

開發者可以享受到 JavaScript 語法的熟悉感，同時獲得構建動態和現代 Web 應用程序所需的響應性。無論你是 Vue 的新手還是資深開發者，深入理解 Vue 3 的響應性模型對于你如何構建和維護 Vue 項目至關重要。

原文地址：https://medium.com/@anikadhikary/vue-3-part-1-how-vue-3-brings-reactivity-to-javascript-objects-bc7db341d8e3