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。