Vue3 学习笔记：揭开响应式之谜——核心

2024-02-02 00:47:38

揭开响应式之谜

在 Vue3 中，响应式系统是其核心之一，它允许您创建能够对数据变化做出反应的应用程序。通过响应式系统，您可以轻松地跟踪数据变化并自动更新 UI。在本文中，我们将重点介绍 ref、Reactive ref 和 reactive 三个核心概念，并通过示例代码演示如何使用它们。

1. ref：引用基础数据类型

ref 是 Vue3 中最简单的数据响应式 API，它允许您创建引用基础数据类型（如字符串、数字和布尔值）的可变引用。ref 创建的数据在 JavaScript 中需要使用 .value 访问，而 reactive 创建的数据则不需要。

// 创建一个引用字符串的 ref
const messageRef = ref('Hello, Vue3!');

// 获取 ref 的值
console.log(messageRef.value); // 输出: Hello, Vue3!

// 更新 ref 的值
messageRef.value = 'Welcome to the world of Vue3!';

// 再次获取 ref 的值
console.log(messageRef.value); // 输出: Welcome to the world of Vue3!

2. Reactive ref：引用对象和数组

Reactive ref 是 ref 的升级版本，它允许您创建引用对象和数组的可变引用。与 ref 不同，Reactive ref 创建的数据不需要使用 .value 访问。

// 创建一个引用对象的 reactive ref
const personRef = reactiveRef({
  name: 'John Doe',
  age: 30,
  city: 'New York'
});

// 获取 reactive ref 的值
console.log(personRef.name); // 输出: John Doe

// 更新 reactive ref 的值
personRef.name = 'Jane Doe';

// 再次获取 reactive ref 的值
console.log(personRef.name); // 输出: Jane Doe

3. reactive：使对象和数组响应式

reactive 函数允许您使对象和数组变得响应式。与 reactive ref 不同，reactive 函数直接使对象或数组变得响应式，而不需要创建引用。

// 创建一个响应式对象
const person = reactive({
  name: 'John Doe',
  age: 30,
  city: 'New York'
});

// 获取响应式对象的值
console.log(person.name); // 输出: John Doe

// 更新响应式对象的值
person.name = 'Jane Doe';

// 再次获取响应式对象的值
console.log(person.name); // 输出: Jane Doe