前言
Vue中的响应式ref和reactive都是是实现数据动态更新和UI自动响应的重要机制，可以进行更便捷的数据管理方式。
一、ref
作用
响应式(ref)是一种将普通的JavaScript对象转换为可响应的对象的机制。它能够追踪对象的变化，并在数据发生改变时自动触发相关的更新。这使得我们可以方便地更新数据，并确保UI能够及时地响应这些变化。
用法
在Vue中，可以使用ref函数来创建一个响应式对象。该函数接受一个初始值作为参数，并返回一个带有.value属性的对象。通过访问.value来获取或修改响应式对象的值。
import { ref } from 'vue';
// 创建响应式对象
const count = ref(0);
// 访问和修改响应式对象
console.log(count.value); // 输出：0
count.value++; // 自动触发更新
使用ref函数创建了一个名为count的响应式对象，ref(0)代表将初始值设为0。可以通过对count.value来获取或修改其值，并且当数据发生变化时，相关的更新会自动触发。
二、reactive
作用
reactive是一种将普通JavaScript对象转换为可观察和响应的对象的机制。它能够追踪对象属性的变化，并在属性发生改变时自动触发相关的更新，可以方便地管理复杂的数据结构，并确保UI能够及时地反映这些变化。
用法
在Vue中，使用reactive函数来创建一个反应式对象。该函数接受一个普通的JavaScript对象作为参数，并返回一个可观察的响应式对象。这点与之前的ref函数不同，reactive可以直接访问和修改响应式对象的属性。
import { reactive } from 'vue';
// 创建反应式对象
const user = reactive({
name: 'Alice',
age: 25
});
// 访问和修改反应式对象
console.log(user.name); // 输出：'Alice'
user.age++; // 自动触发更新
使用reactive函数创建了一个名为user的反应式对象，并定义了两个属性name和age，可以直接访问和修改对象的属性，并且当属性发生变化时，相关的更新会自动触发。
三、区别与对比
ref和reactive在实现数据的动态更新和UI的自动响应方面有一些区别和差异。
- 数据类型：ref适用于包装基本数据类型（如数字、字符串等）或非响应式对象，而reactive适用于包装普通的JavaScript对象。
- 访问方式：ref需要通过
.value来访问和修改其值，而reactive可以直接访问和修改对象的属性。 - 用法差异：使用时，ref需要在变量名后面加上
.value，而reactive不需要。
详解代码对比：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="incrementOne">addOne</button>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
<button @click="incrementTwo">addTwo</button>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const count = ref(0);
const user = reactive({
name: 'Alice',
age: 25
});
const incrementOne = () => {
count.value++;
};
const incrementTwo = () => {
user.age++;
};
</script>
结果：
四、总结
总之，ref和reactive是实现数据动态更新和UI自动响应的重要机制。ref用于包装基本数据类型或非响应式对象，而reactive用于包装普通的JavaScript对象。它们都能够追踪数据的变化，并在发生改变时自动触发相关的更新。此外，关于vue中更详细的响应式内容可以去vue官方文档进行阅读。
