vue3 reactive() 和 ref() 区别

在Vue 3中，reactive和ref是用于响应式数据处理的两个主要函数，它们之间有几个重要的区别：

1. 数据类型：

   • reactive：用于创建一个响应式的普通对象，这意味着对象的所有属性都会被响应式地追踪。
   • ref：用于创建一个包装后的响应式对象，可以用于包装基本类型（如字符串、数字等）和引用类型（如对象、数组等）。

2. 使用方式：

   • reactive：通常用于创建具有复杂数据结构的响应式对象。
   • ref：通常用于创建单个值的响应式引用。

3. 获取内部值的方式：

   • reactive：通过直接访问对象的属性来获取内部值。
   • ref：通过value属性来获取内部值。

4. 变更追踪：

   • reactive：能够追踪对象的所有属性的变更。
   • ref：只能追踪包装后的值的变更。

举个例子，假设我们有一个简单的计数器应用：

javascriptCopy Code
import { reactive, ref } from 'vue';

// 使用 reactive 创建一个响应式对象
const counterObj = reactive({
  count: 0,
});

// 使用 ref 创建一个包装后的响应式引用
const counterRef = ref(0);

在这个例子中，counterObj是一个响应式对象，我们可以直接访问其属性count，并且对其进行响应式地追踪变更。而counterRef是一个包装后的响应式引用，我们可以通过访问其value属性来获取和修改内部的值。