ref 和 reactive

ref 和 reactive都是vue中的响应式实现的关键字，它们在功能和使用场景上有所区别。

ref

ref 是一个用于管理单个响应式数据的 API。它可以让你创建并维护一个可变的响应式数据，并在数据发生变化时自动更新视图。

• 用途： 用于管理单个数据值，例如字符串、数字、布尔值等。
• 特点：
  • 返回一个响应式对象，该对象包含一个 .value 属性，用于访问和修改数据值。
  • 只能用于管理基本数据类型，不能用于管理对象或数组。
  • 当 .value 属性的值发生变化时，会触发视图更新。
• 使用方式：

import { ref } from 'vue';

const count = ref(0); // 创建一个 ref 对象，初始值为 0

// 访问和修改数据值
console.log(count.value); // 输出 0
count.value++;
console.log(count.value); // 输出 1

reactive

reactive 是一个用于创建响应式对象的 API。它可以将普通的 JavaScript 对象转换为响应式对象，当对象中的属性发生变化时，视图会自动更新。

• 用途： 用于管理对象或数组，使其成为响应式的。
• 特点：
  • 返回一个代理对象，该对象包含原始对象的所有属性，但这些属性都是响应式的。
  • 当代理对象中的属性值发生变化时，会触发视图更新。
  • 可以用于管理嵌套的对象或数组。
• 使用方式：

 

import { reactive } from 'vue';

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

// 访问和修改数据值
console.log(user.name); // 输出 'John Doe'
user.age = 31;
console.log(user.age); // 输出 31

总结：

• ref 用于管理单个数据值，适合管理基本数据类型。
• reactive 用于管理对象或数组，适合管理复杂数据结构。

选择使用哪个 API 的原则：

• 如果要管理单个数据值，使用 ref。
• 如果要管理对象或数组，使用 reactive。

注意事项：

• ref 和 reactive 都是响应式的，这意味着当它们的值发生变化时，视图会自动更新。
• 为了避免不必要的性能开销，建议只将需要响应式的数据使用 ref 或 reactive 进行管理。