ref和reactive的区别

1. 引入方式：

   • ref 是 Vue 3 中的一个函数，通常通过 import { ref } from 'vue' 导入。
   • reactive 也是 Vue 3 中的一个函数，通常通过 import { reactive } from 'vue' 导入。

2. 用途：

   • ref 主要用于创建一个包装后的基本数据类型的响应式引用，如数字、字符串、布尔值等。它将基本数据类型包装成响应式对象。
   • reactive 用于创建一个包装后的普通JavaScript对象的响应式代理，使整个对象及其属性都变成响应式。

3. 包装的数据类型：

   • ref 可以用于包装基本数据类型，例如数字、字符串、布尔值。
   • reactive 用于包装普通JavaScript对象。

4. 创建方式：

   • 使用 ref 时，你可以通过 ref() 函数来创建一个响应式引用，如 const count = ref(0)。
   • 使用 reactive 时，你可以通过 reactive() 函数来创建一个响应式代理对象，如 const state = reactive({ count: 0 })。

5. 访问方式：

   • 使用 ref 创建的响应式引用需要通过 .value 来访问或修改值，例如 count.value = 1。
   • 使用 reactive 创建的响应式代理对象可以直接访问和修改属性，例如 state.count = 1。

6. 性能：

   • ref 在包装基本数据类型时，性能较高，因为它是一个轻量级的代理。
   • reactive 在包装普通对象时，会增加一些额外的开销，因为它需要为对象的每个属性创建代理。