vue3中reactive和ref的区别

在Vue 3中，`reactive`和`ref`是两种不同的响应式数据处理方式。

`reactive`用于将一个对象转换为响应式对象。它接收一个普通对象作为参数，并返回一个响应式代理对象。这意味着当原始对象发生变化时，代理对象也会被更新。你可以通过访问代理对象的属性来触发依赖跟踪，从而使相关的视图进行更新。例如：

import { reactive } from 'vue'

const obj = reactive({ count: 0 })
console.log(obj.count) // 0

obj.count++
console.log(obj.count) // 1

`ref`用于将一个基本类型的值转换为响应式对象。它接收一个普通值作为参数，并返回一个包含该值的响应式对象。与`reactive`不同的是，你需要通过`.value`访问和修改`ref`对象中的值。当你修改`ref`对象中的值时，任何使用该值的地方都会自动更新。例如：

import { ref } from 'vue'

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

count.value++
console.log(count.value) // 1

所以，主要区别在于：

- `reactive`适用于对象类型的数据，而`ref`适用于基本类型的数据。
- 访问和修改`reactive`对象的属性不需要额外的操作，而访问和修改`ref`对象的值需要使用`.value`。

需要注意的是，Vue 3中推荐使用`ref`来处理基本类型的数据，而对于对象类型的数据，在大多数情况下使用`reactive`即可。