引言

随着 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