Vue3 与之前的版本相比有很多改进，其中最重要的改进之一是对响应式数据的处理方式。Vue3 提供了两个新的 API：ref 和 reactive，它们可以帮助我们更好地管理和处理响应式数据。在这篇文章中，我们将详细介绍 Vue3 中的 ref 和 reactive 的区别和使用方法。
一、ref
ref 是 Vue3 中的一个函数，它可以将一个普通的变量转化为一个响应式变量。使用 ref 的时候，我们需要传入一个初始值，ref 会返回一个包含了这个初始值的对象。
使用 ref 的语法如下所示：
import { ref } from 'vue';
const count = ref(0);在上面的代码中，我们创建了一个名为 count 的变量，它的初始值为 0。通过调用 ref 函数，我们将 count 变量转化为了一个 ref 对象。在组件中使用 count 的时候，我们需要通过 .value 来访问它的值,且ref.value = 可以修改它的值。但是当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。：
<template>
<div>{{ count }}</div>
</template>
------------------
<script setup>
import { ref } from 'vue';
const count = ref(0);
console.log(count)//RefImpl {...}
console.log(count.value)//0
//使用.value改变count
count.value = 3;
console.log(count.value)//3
</script>注意：在标签中使用无需加.value，在函数中使用必须要加.value
除此之外，ref 还可以用来监听 DOM 元素的变化：
<template>
<div ref="myDiv">这是一个 DOM 元素</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const myDiv = ref(null);
onMounted(() => {
console.log(myDiv.value.innerHTML);
});
return {
myDiv,
};
},
};
</script>在上面的代码中，我们创建了一个名为 myDiv 的 ref 对象，并将它赋值给了一个 div 元素。在组件的 setup 函数中，我们使用了 onMounted 钩子函数，在组件渲染完成之后，打印出了 myDiv 元素的 innerHTML。
二、reactive
reactive 是 Vue3 中的另一个 API，它可以将一个普通的对象转化为一个响应式对象。与 ref 不同的是，reactive 返回的是一个响应式的对象，而不是一个包含值的对象。我们可以通过访问响应式对象的属性来获取或修改它的值。
使用 reactive 的语法如下所示：
import { reactive } from 'vue';
const state = reactive({
count: 0,
});在上面的代码中，我们创建了一个名为 state 的响应式对象，它包含了一个名为 count 的属性，初始值为 0。
在组件中使用 state 的时候，我们可以像访问普通对象的属性一样访问它的属性：
<template>
<div>{{ state.count }}</div>
</template>除了访问属性之外，reactive 也可以对普通 JavaScript 对象或数组进行响应式处理，可以通过 reactive 将一个普通对象转化为响应式对象，从而实现对整个对象的响应式追踪，例如：
const obj = { a: 1, b: 2 };
const reactiveObj = reactive(obj);
// 响应式追踪
reactiveObj.a = 3;
console.log(obj.a); // 输出 3reactive 还可以在嵌套对象和数组中创建响应式对象，例如：
const obj = {
a: 1,
b: { c: 2 }，
d: [1, 2, 3]
};
const reactiveObj = reactive(obj);
// 响应式追踪
reactiveObj.b.c = 3;
reactiveObj.d.push(4);reactive 还支持在嵌套对象中使用 toRefs 将响应式对象的属性转换为响应式引用，方便在模板中使用。例如：
const obj = reactive({ a: 1, b: { c: 2 } });
const { b } = toRefs(obj);
// 模板中使用
<template>
<div>{{ b.c }}</div>
</template>总之，reactive 除了访问属性之外还能处理整个对象或数组的响应式追踪，以及支持在嵌套对象中使用 toRefs 方便在模板中使用。
三、ref和reactive的使用对比
1.ref的使用方法
ref创建的变量可以通过.value来获取和修改其值。例如：
import { ref } from 'vue'
// 创建ref
const count = ref(0)
// 获取ref的值
console.log(count.value) // 输出 0
// 修改ref的值
count.value = 1
console.log(count.value) // 输出 12. reactive的使用方法
reactive创建的对象需要通过解构赋值的方式获取和修改其属性值。例如：
import { reactive } from 'vue'
// 创建reactive对象
const obj = reactive({
count: 0
})
// 获取reactive对象的属性值
console.log(obj.count) // 输出 0
// 修改reactive对象的属性值
obj.count = 1
console.log(obj.count) // 输出 1四、总结
在Vue 3中，ref和reactive都是响应式的API，但是它们的用途不同。ref用于创建简单的值类型变量，而reactive则用于创建复杂的对象。ref创建的变量需要使用.value来获取和修改其值，而reactive创建的对象需要使用解构赋值来获取和修改其属性值。当我们在开发Vue 3应用时，需要根据具体的场景选择使用ref或者reactive。在创建简单的值类型变量时，使用ref可以更方便地获取和修改其值。而当我们需要创建复杂的对象时，使用reactive可以更方便地进行响应式更新。同时，Vue 3也提供了toRef和toRefs这两个API，用于将reactive对象的属性转换为ref对象，方便获取和修改其值。
