Vue3 reactive和ref

在Vue 3中，reactive和ref都是Composition API的一部分，它们用于创建响应式的数据。尽管它们都可以达到类似的目标，但它们的使用场景和行为有所不同。

ref

ref用于声明性地创建一个响应式的引用。当你需要存储一个值，并希望这个值是响应式的，可以使用ref。ref的基本用法如下：

import { ref } = from 'vue';

const count = ref(0); // 创建一个响应式的引用，初始值为0

// 访问和更新值
console.log(count.value); // 访问值
count.value++; // 更新值，这将触发响应式更新

ref常用于：

• 存储单个值。
• 当值可能为null或undefined时。

reactive

reactive用于创建一个响应式的复杂对象，例如对象或数组。reactive接收一个普通对象，并返回该对象的响应式代理。reactive的基本用法如下：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue',
});

// 访问和更新属性
console.log(state.count); // 访问属性
state.count++; // 更新属性，这将触发响应式更新

reactive常用于：

• 存储多个相关联的值，例如组件的状态。
• 当你需要一个对象或数组的响应式代理时。

选择ref还是reactive？

• 如果你只需要一个单一的响应式值，或者这个值可能是undefined，使用ref。
• 如果你需要一个包含多个属性的对象，或者需要数组的响应式代理，使用reactive。

两者的相似之处：

• 都是响应式的：使用ref和reactive创建的数据都可以在Vue的模板中使用，并且它们的变化可以触发视图的更新。
• 都是不可变的：你不能直接修改ref或reactive对象的内部状态，而应该使用Vue提供的方法来更新它们。

两者的不同之处：

• ref用于单一值，reactive用于多个值或复杂结构。
• ref创建的引用访问值时使用.value属性，而reactive创建的代理直接访问属性，无需.value。
• ref适合用于基本数据类型，reactive适合用于对象和数组。

了解ref和reactive的区别和适用场景，可以帮助你更有效地使用Vue 3的Composition API。