浅记Vue3中 ref 和 reactive 是两种主要的响应式数据声明方式，它们有以下主要区别

1. 声明方式

ref：可以包装任何类型的值（基本类型、对象、数组等）

const count = ref(0) // 基本类型

const obj = ref({ name: 'John' }) // 对象

const arr = ref([1, 2, 3]) // 数组

reactive：只能用于对象类型（对象、数组、Map、Set等）

const obj = reactive({ name: 'John' })

const arr = reactive([1, 2, 3])

2. 访问方式

ref：需要通过 .value 访问和修改

const count = ref(0)

console.log(count.value) // 读取

count.value = 1 // 修改

reactive：直接访问属性

const state = reactive({ count: 0 })

console.log(state.count) // 读取

state.count = 1 // 修改

3. 模板中使用

ref：在模板中自动解包，无需 .value

reactive：直接使用属性

4. 响应式

ref：是一个响应式的 ref 对象，当它的值发生变化时，会触发相应的更新

reactive：是一个响应式的对象，当它的属性发生变化时，会触发相应的更新

5. 深度响应

ref：默认不会深度响应，即对嵌套对象的修改不会触发更新

reactive：默认会深度响应，即对嵌套对象的修改会触发更新

6. 性能

ref：对于基本类型的响应式，ref 通常比 reactive 更轻量级，因为它不需要额外的代理和追踪

reactive：对于复杂的对象，reactive 通常更高效，因为它可以自动追踪所有的属性变化

7. 注意事项

ref：在模板中使用时，需要解包 .value

reactive：在模板中直接使用属性

8. 总结

选择使用 ref 还是 reactive 取决于具体的需求：

如果需要一个基本类型的响应式，可以使用 ref

如果需要一个复杂的对象的响应式，可以使用 reactive

一般来说，对于简单的数据，ref 更适合，而对于复杂的数据，reactive 更适合。

选择合适的响应式方式可以提高代码的可读性和性能。