文
章
目
录
章
目
录
Vue开发响应式数据时，ref和reactive是两个常用的创建响应式数据的方法，它们各自有着独特的特点和适用场景。接下来，我们就详细探讨一下这两者的区别，以及如何正确使用它们。
一、ref：基本类型响应式数据
在Vue中，ref主要用于创建基本类型的响应式数据。使用ref创建的数据，在模板中使用时不需要额外添加.value，但在JavaScript代码中访问或修改时，则必须加上.value 。下面来看一个反例：
// 定义数据
let name = ref('张三');
let age = ref(18);
let tel = '123456789'; // 此处tel不需要响应式，因为它的值不会频繁变化，也不需要在界面上实时响应修改
// 定义方法
function changename() {
name = 'asd'; // 这样会报错，因为在js中使用ref定义的数据，修改时需要加.value
}
function changeage() {
age += 1; // 同样会报错，需要使用age.value += 1;
}
function showTel() {
alert(tel);
}
而正确的使用方式如下：
<script lang="ts" setup name="person">
import {ref} from 'vue';
// 定义数据
let name = ref('张三');
let age = ref(18);
let tel = '123456789'; // 可不用响应式，根据实际业务需求决定
// 定义方法
function changename() {
name.value = 'asd'; // 在js中修改ref定义的数据，需使用.value
}
function changeage() {
age.value += 1;
}
function showTel() {
alert(tel);
}
</script>
在这个示例中，我们定义了一些基本类型的响应式数据name和age，以及一个普通字符串tel。在修改name和age时，一定要记得在JavaScript代码中加上.value，否则就会出现错误。
二、reactive：对象类型响应式数据
reactive用于创建对象类型的响应式数据，它具有深层次的响应式特性。也就是说，当对象内部的属性发生变化时，Vue能够自动检测到并更新相关的视图。不过，reactive也存在一定的局限性，比如包裹的对象不可整体修改。
下面是一个使用reactive的示例：
<template>
<div class="person">
<h2>
汽车信息： 一辆{{ car.brand }}车，价值{{ car.price }}万
</h2>
<button @click="changePrice">修改汽车的价格</button>
<br>
<h2>游戏列表</h2>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
<button @click="changename">修改第一个游戏的名字</button>
</ul>
</div>
</template>
<script lang="ts" setup name="person">
import {reactive} from 'vue';
// 定义数据
let car = reactive({
brand: '奔驰',
price: 100
});
let games = reactive([
{id: '01', name: 'aa'},
{id: '02', name: 'bb'},
{id: '03', name: 'cc'}
]);
// 定义方法
function changePrice() {
car.price += 10; // 直接修改对象内部的属性，Vue会自动检测到变化并更新视图
}
function changename() {
games[0].name = 'kkk'; // 同样，修改数组中对象的属性也能被Vue检测到
}
</script>
<style>
.person {
background-color: rgb(178, 178, 216);
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
li {
font-size: 20px;
}
</style>
在这个例子里，我们通过reactive创建了car和games两个响应式数据，一个是对象，一个是包含多个对象的数组。在changePrice和changename方法中，我们修改了对象内部的属性，Vue能够及时捕获这些变化并更新视图。
三、ref与reactive的区别总结
- 数据类型支持：
ref既可以定义基本类型的响应式数据，也能定义对象类型的响应式数据；而reactive只能定义对象类型的响应式数据。 - 访问和修改方式：使用
ref创建的变量，在JavaScript代码中访问和修改时必须使用.value；而reactive创建的响应式对象，直接访问和修改其属性即可。 - 响应式深度：
reactive是深层次的响应式，对象内部任何属性的变化都能被检测到；ref则是浅层次的，如果ref定义的是对象，想要访问内部属性时，同样需要通过.value来操作，且只有.value指向的对象整体发生变化时，Vue才会检测到响应式变化。 - 重新赋值的影响：
reactive重新分配一个新对象时，会失去响应式。例如，如果对car重新赋值car = { brand: '宝马', price: 120 };，Vue将无法检测到这个变化，视图也不会更新；而ref定义的对象，重新赋值时（如name.value = { newProp: 'newValue' };），Vue能正常检测到变化并更新视图。
在实际开发中，我们要根据具体的业务需求，合理选择ref和reactive来创建响应式数据，这样才能充分发挥Vue的响应式特性，开发出好代码。
