举例说明 Vue3中 ref reactive 的区别

让我举一个例子来说明 Vue 3 中 ref 和 reactive 的区别。

使用 ref：

import { ref } from 'vue';

// 创建一个 ref
const countRef = ref(0);

// 访问 ref 的值
console.log(countRef.value); // 输出: 0

// 修改 ref 的值
countRef.value++; // 增加计数器的值

// 再次访问 ref 的值
console.log(countRef.value); // 输出: 1

使用 reactive：

import { reactive } from 'vue';

// 创建一个 reactive 对象
const state = reactive({
  count: 0
});

// 访问 reactive 对象的属性
console.log(state.count); // 输出: 0

// 修改 reactive 对象的属性
state.count++; // 增加计数器的值

// 再次访问 reactive 对象的属性
console.log(state.count); // 输出: 1

区别解释：

1. 引用访问：

   • ref 返回的是一个包含 .value 属性的普通 JavaScript 对象，因此在访问或修改值时需要使用 .value。
   • reactive 返回的是一个代理对象，直接访问和修改属性即可，无需额外的 .value 属性。

2. 对基本类型的处理：

   • ref 适用于包装基本类型的值，比如数字、字符串、布尔值等。
   • reactive 适用于包装对象，可以将整个对象转换为响应式代理。

3. 适用场景：

   • ref 通常用于包装单个的基本类型值，比如计数器、标志位等。
   • reactive 通常用于管理包含多个属性的对象，比如组件的状态、表单数据等。

总的来说，ref 主要用于包装基本类型的值，并且需要使用 .value 属性来访问和修改值；而 reactive 则主要用于包装对象，可以直接访问和修改对象的属性。