vue3中 reactive和ref的区别

在Vue 3中，reactive和ref都是用于响应式数据的API。它们的主要区别在于使用方式和返回值类型。

reactive：

reactive函数用于将一个对象转换为响应式对象。它接收一个普通的JavaScript对象，并返回一个被代理的响应式对象。这意味着当响应式对象的属性发生更改时，Vue会自动检测到并重新渲染相关的组件。

javascript 复制代码

import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

console.log(state.count); // 0
state.count = 5;
console.log(state.count); // 5

在上面的例子中，reactive函数将一个普通的对象state转换为响应式对象。我们可以直接访问响应式对象的属性，通过修改属性的值，Vue会自动更新相关的视图。

ref：

ref函数用于将一个值转换为响应式对象。它接收一个普通的JavaScript值，并返回一个包装的响应式对象，其值可以通过.value进行访问和修改。

javascript 复制代码

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 0
count.value = 5;
console.log(count.value); // 5

在上面的例子中，ref函数将一个数字0转换为响应式对象。我们可以通过.value来访问和修改响应式对象的值。

需要注意的是，在模板中使用ref时，Vue会自动解包，你可以直接在模板中使用ref对象，无需通过.value属性访问其值。

总结：

使用reactive可以创建一个响应式的对象，访问和修改属性时不需要特殊处理。

使用ref可以创建一个响应式的包装对象，访问和修改值时需要使用.value属性。

通常情况下，如果你需要创建一个包装的响应式对象，用于存储单个值，可以使用ref。

如果你需要创建一个包含多个属性的响应式对象，可以使用reactive。

reactive() 的局限性

reactive() API 有两条限制：

仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的原始类型无效。

因为 Vue的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地"替换"一个响应式对象，因为这将导致对初始引用的响应性连接丢失：

reactive对比ref

从定义数据角度对比：

ref用来定义：基本数据类型

reactive用来定义：对象（或数组）类型数据

备注： ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象从原理角度对比

ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）

reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

从使用角度对比：

ref定义数据：操作数据需要 .value ,读取数据时模板中直接读取不需要 .value

reactive 定义的数据：操作数据和读取数据均不需要 .value