reactive和ref到底有什么区别

[ Vue(2+3) ] 

在 Vue 3 中，reactive 和 ref 都是用于响应式数据的 API，但它们有不同的用途和特点。

区别

1. reactive

reactive 函数用于将一个普通 JavaScript 对象转换成响应式对象，使得对象的属性能够被 Vue 追踪并自动更新视图。

例如，我们有以下普通的 JavaScript 对象：

1
2
3
4

const user = {
  name: "John",
  age: 30,
};

通过使用reactive函数，我们可以将其转换成响应式对象：

1
2
3

import { reactive } from "vue";

const userObj = reactive(user);

现在，当我们修改 userObj 对象的属性时，视图将自动更新。例如，以下代码将自动更新页面上的用户名称：

1

userObj.name = "Jane";

2. ref

ref 函数用于将一个普通 JavaScript 值转换成响应式对象，使得值能够被 Vue 追踪并自动更新视图。

例如，我们有一个普通的 JavaScript 数值：

1

const count = 0;

1
2
3

import { ref } from "vue";

const countRef = ref(count);

现在，当我们修改 countRef 的值时，视图将自动更新。例如，以下代码将自动更新页面上的计数器：

1

countRef.value++;

需要注意的是，我们不能直接通过 countRef 来访问数值本身，而是需要使用.value 来获取或设置数值的值。

如何给数组重新赋值

假设有以下数据

1

const actList = reactive([1, 2, 3]);

如果在接口中直接修改actList的值, 肯定不能通过actList=[...]的方式, 因为 actList 前面是const声明, 可以使用下面的方式:

1
2
3
4

import { reactive } from "vue";

const actList = reactive([1, 2, 3]);
actList.splice(0, myArray.length, 4, 5, 6); //视图将自动更新，显示 [4, 5, 6]

到底什么时候用 ref 什么时候用 reactive

一般来说，如果你需要处理一个简单的、基本类型的值（例如数字、字符串、布尔等），那么你可以使用 ref 来创建一个响应式的引用类型数据。ref 函数返回一个包含 .value 属性的响应式对象，而 .value 属性保存的是基本类型的值。例如：

1
2
3

import { ref } from "vue";

const count = ref(0); // 创建一个响应式的数字值

这样创建的 count 变量是一个响应式对象，你可以通过 .value 属性来访问它的值，也可以通过修改 .value 属性来更新这个值。例如：

1

count.value = 1; // 更新 count 的值为 1，视图也会自动更新

如果你需要处理的是一个复杂的数据类型，例如对象或数组，那么你可以使用 reactive 来创建一个响应式对象。reactive 函数接收一个普通的 JavaScript 对象，并返回一个响应式对象。例如：

1
2
3
4
5
6
7

import { reactive } from "vue";

const data = reactive({
  message: "Hello, World!",
  count: 0,
  list: [1, 2, 3],
});

这样创建的 data 变量是一个响应式对象，你可以直接访问其中的属性或元素，也可以修改它们来更新视图。例如：

1
2
3

data.message = "Hello, Vue!"; // 更新 message 属性的值，视图也会自动更新
data.count++; // 自增 count 属性的值，视图也会自动更新
data.list.push(4); // 向 list 数组中添加一个新元素，视图也会自动更新

总体来说，可以用 ref 来处理简单的基本类型数据，而用 reactive 来处理更为复杂的对象或数组。但实际上，ref 也可以处理对象，只是需要用 .value 属性来访问或修改对象的属性。而 reactive 也可以处理基本类型数据，只是会被自动包装成一个对象。所以具体应该根据具体情况来选择使用 ref 还是 reactive。

既然 ref 也可以用来处理对象, 为什么还要有 reactive 这个函数

虽然 ref 也可以用来处理对象，但是在处理复杂对象或数组时，ref 的用法会变得有些繁琐。具体来说，如果使用 ref 处理对象或数组，需要将整个对象或数组都包装在一个 ref 对象中，然后使用 .value 属性来访问或修改对象或数组的属性或元素。这样的代码会变得不太直观，也不太方便维护。

而使用 reactive 函数可以更好地处理复杂对象或数组。reactive 函数会将整个对象或数组都转换为一个响应式对象，使得对象或数组的所有属性或元素都可以被 Vue 追踪并自动更新视图。这样代码就更加直观，也更加方便维护。

另外，使用 reactive 函数还可以方便地处理嵌套对象或数组。假设有一个嵌套的对象，使用 ref 来处理会变得非常麻烦，需要将所有的对象都包装在 ref 对象中。而使用 reactive 函数可以方便地处理嵌套的对象或数组，让代码更加简洁。

综上所述，虽然 ref 也可以处理对象，但是在处理复杂对象或数组时，使用 reactive 函数会更加方便，更加直观，也更加易于维护。